Javascript设置CSS:样式之后

时间:2011-09-07 07:36:18

标签: javascript jquery css css3

你可以用Javascript设置:使用css的样式后吗?

所以我们说:

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

1 个答案:

答案 0 :(得分:30)

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属性字符串的基本功能。