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

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

style=“背景尺寸：封面”

但我需要使用它

$(".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

您的原始代码应该工作正常，但如果没有，您可以尝试

.attr（）

。我经常看到

.data（）

有时会出现问题，但

.attr（）

似乎是解决办法

另请阅读：

从jQuery1.8开始，.css（）setter将自动为属性名添加前缀。例如，Chrome/Safari中的.css（“user select”，“none”）将其设置为-webkit user select，Firefox将使用-moz user select，IE10将使用-ms user select

还有一件出错的事情是回归。您只需要返回bg大小，而您正在设置它。您已经完成了

背景大小

的功能，现在只需返回颜色即可。请看这里：

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

$（“div.example”）.css（“宽度”，函数（索引）{ 收益指数*50； });

此示例将匹配元素的宽度设置为增量 更大的值

注意：如果setter

函数（即函数(
索引，样式）{}

，或者如果返回了

未定义的

，则当前值为 没有改变。这对于仅在以下情况下有选择地设置值非常有用： 符合某些标准

因此，您可以尝试：

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

---

您的原始代码应该工作正常，但如果没有，您可以尝试

.attr（）

。我经常看到

.data（）

有时会出现问题，但

.attr（）

似乎是解决办法

另请阅读：

从jQuery1.8开始，.css（）setter将自动为属性名添加前缀。例如，Chrome/Safari中的.css（“user select”，“none”）将其设置为-webkit user select，Firefox将使用-moz user select，IE10将使用-ms user select

还有一件出错的事情是回归。您只需要返回bg大小，而您正在设置它。您已经完成了

背景大小

的功能，现在只需返回颜色即可。请看这里：

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

$（“div.example”）.css（“宽度”，函数（索引）{ 收益指数*50； });

此示例将匹配元素的宽度设置为增量 更大的值

注意：如果setter

函数（即函数(
索引，样式）{}

，或者如果返回了

未定义的

，则当前值为 没有改变。这对于仅在以下情况下有选择地设置值非常有用： 符合某些标准

因此，您可以尝试：

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

---

试试这样的。您可以使用以下语法将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')  });
 });

---

试试这样的。您可以使用以下语法将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')  });
 });

---

问题是……？

从jQuery 1.8开始，.css（）setter将自动处理属性名称的前缀。

您的原始代码应该可以正常工作。问题是……？

从jQuery 1.8开始，.css（）setter将自动处理属性名称的前缀。

您的原始代码应该可以正常工作。您好，“Marley”谢谢你的回答。它如何工作？不要在inspect元素中显示-webkit background size-moz-只显示background siz，所以它是如何工作的？？尝试安装mozilla插件“firebug”，并用它来检查。我想说，你可能没有看到“-webkit…”版本，因为firefox不是webkit浏览器，因此不理解它。如果您在其中也没有看到-moz，那是因为浏览器将其转换为简单的“背景大小”，因为它是moz，因此不需要向您显示-moz位。在所有浏览器中使用脚本并在所有浏览器中检查，然后在修改后再次执行相同操作并记录差异。希望能有帮助。我只是想说清楚。浏览器通常不会向您显示其css前缀。就像如果你写了-moz-someproperty，那么mozilla会从中去掉-moz。如果有一个名为“dave”的浏览器，您编写了-dave background color，那么浏览器“dave”将显示“background color”作为属性。。。使用这些供应商前缀的原因是在不同的浏览器中进行更改。如果您试图在jquery中显示和更改的内容在所有浏览器中都显示相同，没有任何差异，那么您所需要的只是“背景大小”。是的，它工作正常。非常感谢您的回答，我真的为您感到骄傲。谢谢，你好，马利，谢谢你的回答。它如何工作？不要在inspect元素中显示-webkit background size-moz-只显示background siz，所以它是如何工作的？？尝试安装mozilla插件“firebug”，并用它来检查。我想说，你可能没有看到“-webkit…”版本，因为firefox不是webkit浏览器，因此不理解它。如果您在其中也没有看到-moz，那是因为浏览器将其转换为简单的“背景大小”，因为它是moz，因此不需要向您显示-moz位。在所有浏览器中使用脚本并在所有浏览器中检查，然后在修改后再次执行相同操作并记录差异。希望能有帮助。我只是想说清楚。浏览器通常不会向您显示其css前缀。就像如果你写了-moz-someproperty，那么mozilla会从中去掉-moz。如果有一个名为“dave”的浏览器，并且您编写了-dave background color，那么浏览器“dave”将显示“background colo”