我正在使用带有一些CSS3动画的通用CSS标语代码（不是重点，而是提供背景）。我要实现的目标是使用自定义属性设置标题类，并获取该属性的内容，然后使用jQuery为其添加样式？像这样，但是他们有很多这些div，它们将在同一页面上使用相同的技术...
<div class="banner banner-small animate" data-bg="https://domain.com/path/img/bg.png">
....
</div>
然后jQuery将运行并输出如下代码：
<div class="banner banner-small animate" data-bg="https://domain.com/path/img/bg.png" style="background-image: url('https://domain.com/path/img/bg.png')">
....
</div>
我希望这不会含糊。我只是最近才开始学习jQuery，所以我很喜欢它！只是真的不知道该怎么做。
当然，您可以通过多种方式将数据属性用作选择器，然后通过data()函数访问其数据：
// Iterate through each element with the data-bg attribute
$('[data-bg]').each(function(){
// Set the background image for each element to it's respective
// attribute value
$(this).css('background-image','url(' + $(this).data('bg') + ')');
});
或者，如果您不想再次调用jQuery，则可以使用Niet的建议：
$('[data-bg]').each(function(){
this.style.backgroundImage = url(' + this.getAttribute('data-bg') + ')';
});
$('[data-bg]').css('background-image', function() {
return 'url(' + $(this).data('bg') + ')';
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句