JavaScript设置CSS :after样式

Question

JavaScript设置CSS :after样式

20

你能用JavaScript设置CSS的:after样式吗？

例如：

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

- Harry

5

这有所帮助：https://dev59.com/c3VC5IYBdhLWcg3wYQEp。 - WTK

1

由于您似乎在使用jQuery，因此我已添加了jQuery标签。 - T.J. Crowder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user748221 · Accepted Answer

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