2011-09-07 16 views
13

:afterスタイルをCSSとJavascriptで設定できますか?Javascript set 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:'プロパティが含まれていないようです。 –