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內聯樣式

回答

相關問題