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.
精彩评论