开发者

Javascript set CSS :after styles

Can you set the :after sty开发者_开发百科les of css with Javascript?

So lets say:

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


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: "''"
});

A minimal implementation. You most likely would want to keep track of the rules you add so you can remove them. sheet.insertRule returns the index of the new rule which you can use to get a reference to it for editing or removal.

Edit: added basic functionality to convert an object into a css property string for convenience.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜