☰

Javascript で CSS を設定する:after スタイル 質問する

tag-icon • tag-icon javascript jquery css
Javascript で CSS を設定する:after スタイル 質問する

Javascript で CSS の :after スタイルを設定できますか?

では、次のように言いましょう:

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

ベストアンサー1

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 プロパティ文字列に変換する基本機能を追加しました。

おすすめ記事