如何更改页面加载“jquery”的属性中给出的 Divs CSS 背景

How to change Divs CSS Background given in the attribute on page Load "jquery"

本文关键字：属性 Divs 背景 CSS 何更改 加载 jquery      更新时间：2023-09-26

所以基本上我遇到了这个问题，我希望jQuery检查属性中的类.js-bg："data-background"，获取属性，然后将divs css Background更改为属性中给出的url。

.HTML：

<div class="js-bg">
    <br><br><br><br>
</div>

.CSS：

.js-bg {
    width: 100%;
    background-size: cover;
    background-position: center;
}

JS/jQuery （第一次尝试）：

var item = $('.js-bg'),
    bg = item.attr('data-background');
item.css('background', 'url(' + bg + ')');

这里的问题是它采用第一个属性，然后将该图像应用于所有其他 Div。

JS/jQuery （第二次尝试）：

var item = $('.js-bg'),
    bg = item.attr('data-background');
item.load(function() {
    $(this).css('background', 'url(' + bg + ')');
});

但这也行不通，我在网上搜索了所有内容，但找不到答案。

感谢您的考虑。

尝试遍历这些元素并为每个元素设置背景，如下所示：

$('.js-bg').each(function(){
  var bg=$(this).attr('data-background');
  $(this).css('background', 'url('+ bg +')');
});

如果您有多个具有相同类的div，则 $（'.js-bg'） 将获取所有div 并替换所有div 的背景。

如果您只想更改其中之一，则应在您希望更改背景的div 上有一个唯一的选择器。

$（this） 只有在该元素内部的某些内容触发背景更改时才有效。

相关文章：