2011-09-07 76 views
13

你可以設置:CSS樣式的JavaScript後?Javascript設置CSS:風格後

因此,可以說:

$("#foo li:after").css("left","100px"); 
+5

這可以幫助:http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – WTK

+0

添加jQuery標籤,因爲你似乎正在使用它。 –

回答

25
var addRule = (function(style){ 
    var sheet = document.head.appendChild(style).sheet; 
    return function(selector, css){ 
     var propText = Object.keys(css).map(function(p){ 
      return p+":"+css[p] 
     }).join(";"); 
     sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length); 
    } 
})(document.createElement("style")); 

addRule("p:before", { 
    display: "block", 
    width: "100px", 
    height: "100px", 
    background: "red", 
    "border-radius": "50%", 
    content: "''" 
}); 

最小實現。你很可能會想跟蹤你添加的規則,以便你可以刪除它們。 sheet.insertRule返回新規則的索引,您可以使用該規則獲取對其進行編輯或刪除的引用。

編輯:爲方便起見,添加了將對象轉換爲css屬性字符串的基本功能。

+0

似乎'content:'屬性沒有包含在內。 –