jquery跨浏览器css3内联样式

从jquery中可以得到这样的东西吗？jquery跨浏览器css3内联样式

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>

当我使用：

$("#test").css({ 
    'background': '-webkit-linear-gradient(top, #2F2727, #1a82f7)', 
    'background': '-moz-linear-gradient(top, #2F2727, #1a82f7)' 
});

结果是（铬）

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "/>

来源

2012-03-14 galer88

你可以创建css类并使用addclass方法代替.css – 2012-03-14 17:25:57

看起来像这是一个老问题，但我会分享一个jsfiddle我在互联网上找到了你所要求的：http：// jsfiddle .net/barney/D9W4v/ – medBo 2015-08-21 12:39:08

那是不可能的了jQuery，因为密钥不能被复制。你必须使用$.cssHooks或：

$("#test").css('background', '-webkit-linear-gradient(top, #2F2727, #1a82f7)') 
      .css('background', '-moz-linear-gradient(top, #2F2727, #1a82f7)');

而不是使用style设置固定的风格，我建议使用*Class功能：addClass，removeClass和toggleClass。

对于HTML，你必须使用style属性：

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>

来源

2012-03-14 17:25:21

我不能使用类，因为梯度的值是动态生成的 – galer88 2012-03-14 17:30:14

@ galer88在我的答案中使用该方法，或者使用[this plugin]（http://stackoverflow.com/a/8457479/ 938089？建的JavaScript对象使用的与 - jQuery的CSS-什么 - 关于重复的键）。 – 2012-03-14 17:32:16

不，你不应该需要。一个CSS属性不能有多个值。这可以直接在CSS中工作，因为重复的属性彼此覆盖，在这种情况下依赖于浏览器。基本上，使用该CSS，基于webkit的浏览器会查看webkit特定的属性并应用它，然后查看未知属性并忽略它。基于壁虎的浏览器会看到一个未知的属性并忽略它，然后查看一个Mozilla特有的属性并应用它。

尝试在Firefox中的代码 - 我敢打赌，它会工作得很好，除了它会显示Mozilla属性而不是webkit。另外，如果这应该是CSS3，那么您应该只能使用linear-gradient而不是特定于供应商的，然后它也可以在所有CSS3兼容的浏览器中运行。

编辑：除linear-gradient实际上不支持。因此，您应该使用这些特定于供应商的值并另外使用-ms-linear-gradient来支持IE，-o-linear-gradient以支持Opera，并且还将使用linear-gradient以实现将来的兼容性。 ;）

来源

2012-03-14 17:33:29

“你应该可以直接使用'linear-gradient'而不是特定于供应商的'linear-gradient'，然后它就可以在所有CSS3兼容的浏览器中工作。”截至2012年第一季度，有效的是，没有一个。 – BoltClock 2012-03-14 17:34:46

@BoltClock好的，谢谢。不知道它实际上还没有支持...我曾经想指出'-webkit-linear-gradient'和'-moz-linear-gradient'不是CSS3属性，它们是供应商特定的属性。 – 2012-03-14 17:44:58

是的，这是真的:) – BoltClock 2012-03-14 17:45:28

jquery跨浏览器css3内联样式

回答

相关问题