Question

此代码适用于背景大小内联css ex：

style="background-size:cover"

$(".tp-sliderSection .item").css('background-size', function(){
  $(this).css('background-size',$(this).data("bg-size"));
});

<div data-bg-size="cover"></div>

但我需要使用它

$(".tp-sliderSection .item").css('background-size', function(){
  $(this).css('background-size',$(this).data("bg-size"));
  $(this).css('-webkit-background-size',$(this).data("bg-size"));
  $(this).css('-moz-background-size',$(this).data("bg-size"));
});

我需要输出css样式

  style="background-size:cover; -webkit-background-size:cover; -moz-background-size:cover"

ETC

Answer 1

您的原始代码应该运行正常，但如果没有，您可以尝试.attr()。我经常看到有时.data()出现问题，但.attr()似乎是修复。

另请阅读：http://api.jquery.com/css/：

从jQuery 1.8开始，.css（）setter将自动处理属性名称的前缀。例如，在Chrome / Safari中将.css（“user-select”，“none”）设置为-webkit-user-select，Firefox将使用-moz-user-select，IE10将使用-ms-user -select。

还有一件事就是回归。你需要返回bg-size而你在那里设置它。你已经完成了background-size的功能，现在你只需要返回颜色。看看这里：http://jsbin.com/xurevijunu/edit?html,css,js,console,output

从jQuery 1.4开始，.css（）允许我们将函数作为属性值传递：

$（“div.example”）。css（“width”，function（index）{         返回指数* 50;       }）;

此示例以增量方式设置匹配元素的宽度   更大的价值。

注意：如果在设置器function (ie. function( index, style ){} )中未返回任何内容，或者返回undefined，则当前值为   没有改变。这对于仅在选择性设置值时非常有用   符合某些标准。

所以，你可以尝试：

$(".tp-sliderSection .item").css('background-size', function(){
  return $(this).attr("data-bg-size");
});

Answer 2

尝试这样的事情。您可以使用此语法对css进行括号...

$(".tp-sliderSection .item").css('background-size', function(){
  $(this).css({ 'background-size’ : $(this).data('bg-size’),‘-webkit-background-size' : $(this).data('bg-size’), '-moz-background-size’ : $(this).data('bg-size')  });
 });

如何使用带有css3前缀的jquery数据属性添加内联css

2 个答案: