Установить идентификатор фонового изображения с помощью JQuery

Question

Установить идентификатор фонового изображения с помощью JQuery

0

Я хочу иметь разные фоны на основе размера пользовательского устройства. Я установил фоновое изображение с помощью JQuery, без проблем. Теперь мне нужно установить идентификатор фонового изображения, и я не могу понять его. Мне нужен идентификатор, установленный в bg для другого сценария ниже.

Пожалуйста помоги!

благодаря

var theDiv = document.getElementById("body");
 if (screen.width <= 1300) {
    $('body').css('background-image', 'url(images/jpg/SmallLeather.jpg)');}
else{
    $('body').css('background-image', 'url(images/jpg/BackGroundCon.jpg)');
    $('body').css('background-image', 'id (bg)');}
</script>  
<script>
$(window).load(function() {    
    var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }
}
theWindow.resize(resizeBg).trigger("resize");
});
</script>

Don 20 март 2014, в 07:39

Источник

0

Возможно, вы захотите сделать свою жизнь немного проще, используя медиа-запросы CSS
ystan- 20 март 2014, в 06:00
0

Для всех вас там с быстрыми ответами, СПАСИБО! Это поздно для меня, забыл, что не было идентификатора для изображения BG! Я получил по касательной, когда я схватил линию JQuery. Правильный ответ должен был использовать и изображение, а не свойство фонового изображения, как так.
Don 20 март 2014, в 06:28

Теги:

javascript

jquery

html

css

5 ответов

0

Вот решение, которое я придумал....

<img src="images/jpg/BackGroundCon.jpg" id="bg" alt=""> 
<script type="text/javascript">
var theDiv = document.getElementById("body");
if (screen.width <= 1300) {
var img= 'images/jpg/SmallLeather.jpg';
$('#bg').attr("src",img); 
 }

</script><script>
$(window).load(function() {    
var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }
}
theWindow.resize(resizeBg).trigger("resize");
});
</script>

Здесь он действует, по крайней мере, на данный момент. http://heretomeet.com

StackExchange не позволит мне принять более одного вашего ответа, что является позором, так как у многих из вас были очень полезные комментарии в 2 часа ночи! Когда вы спите?

благодаря

Дон

Don 20 март 2014, в 17:58

0

Вы не можете установить идентификатор фонового изображения, так как он его не имеет. Я бы рекомендовал использовать .addClass() чтобы добавить необходимый идентификатор (теперь это класс), или если тело еще не имеет идентификатора, используйте .attr("id", "bg") чтобы установить id для тег тела. А затем получите фоновое изображение через .css("background-image").

Обновление: похоже, что вы хотите изменить размер фонового изображения. Если да, рассмотрите возможность использования background-size: cover или contain в css. Пока вы на нем, используйте медиа-запросы, упомянутые в одном из ответов тоже

Aister 20 март 2014, в 04:52

0

var id = $('body').attr('id');
$("#"+id).css('background-image', 'url(BackGroundCon.jpg)');

ahalya 20 март 2014, в 04:43

0

Что это будет делать за пределами $(document.body).css('background-image', 'url(BackGroundCon.jpg)'); ,
jfriend00 20 март 2014, в 06:23

0

Используйте attr(), чтобы установить атрибут id тела в bg.

$('body').attr('id', 'bg');

tchow002 20 март 2014, в 04:39

0

Зачем это нужно делать, когда вы можете в любое время ссылаться на объект body как document.body .
jfriend00 20 март 2014, в 06:06
0

Правда. Но если вы проверите его текущий код, у него возникнут проблемы с его селектором $("#bg") .
tchow002 20 март 2014, в 06:07
0

Честно говоря, я не могу понять, что, черт возьми, пытается сделать ОП в своем коде. Я просто попытался ответить на слова вопроса.
jfriend00 20 март 2014, в 06:09
0

Я думаю, что он хочет выполнить только нижний скрипт, когда размер экрана> 1300
Aister 20 март 2014, в 06:10

Показать ещё 2 комментария

Ещё вопросы

Возможно, вы захотите сделать свою жизнь немного проще, используя медиа-запросы CSS
Для всех вас там с быстрыми ответами, СПАСИБО! Это поздно для меня, забыл, что не было идентификатора для изображения BG! Я получил по касательной, когда я схватил линию JQuery. Правильный ответ должен был использовать и изображение, а не свойство фонового изображения, как так.
Что это будет делать за пределами $(document.body).css('background-image', 'url(BackGroundCon.jpg)'); ,
Зачем это нужно делать, когда вы можете в любое время ссылаться на объект body как document.body .
Правда. Но если вы проверите его текущий код, у него возникнут проблемы с его селектором $("#bg") .
Честно говоря, я не могу понять, что, черт возьми, пытается сделать ОП в своем коде. Я просто попытался ответить на слова вопроса.
Я думаю, что он хочет выполнить только нижний скрипт, когда размер экрана> 1300

jfriend00 · Accepted Answer · 2014-03-20T04-09-00.000Z

Фоновое изображение не имеет собственного идентификатора. Объект, для которого он установлен в качестве фона, может иметь идентификатор. Затем вы можете перейти к фоновому изображению, найдя объект-хост с этим идентификатором, а затем установив фоновое изображение на этот объект.

Если объектом является тело, то вам действительно не нужен идентификатор для извлечения этого объекта, поскольку вы можете в любой момент ссылаться на него как на document.body. Существует встроенный доступ к этому объекту в javascript.

Кроме того, вы можете динамически корректировать фоновое изображение на основе размера окна полностью с помощью CSS (без javascript) с использованием запросов в формате CSS.

Ага! это было бы тело, скорее всего, в этом случае ...