Question JavaScript set CSS: après les styles


Pouvez-vous définir les styles suivants de css avec Javascript?

Alors disons:

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

15
2017-09-07 07:36


origine


Réponses:


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

Une implémentation minimale Vous souhaiterez probablement garder une trace des règles que vous ajoutez afin de pouvoir les supprimer. sheet.insertRule renvoie l'index de la nouvelle règle que vous pouvez utiliser pour obtenir une référence à modifier ou à supprimer.

Edit: ajout de fonctionnalités de base pour convertir un objet en une chaîne de propriétés css pour plus de commodité.


27
2017-09-07 07:46