with - modificare css con javascript




È possibile modificare un foglio di stile CSS usando JavaScript?(NON lo stile di un oggetto, ma il foglio di stile stesso) (2)

A partire dal 2011

Sì, puoi, ma dovrai affrontare problemi di compatibilità tra browser:

http://www.quirksmode.org/dom/changess.html

A partire dal 2016

Il supporto del browser è notevolmente migliorato (ogni browser è supportato, incluso IE9 +).

  • Il metodo insertRule() consente l'aggiunta dinamica di regole a un foglio di stile.

  • Con deleteRule() , puoi rimuovere le regole esistenti da un foglio di stile.

  • È possibile accedere alle regole all'interno di un foglio di stile tramite gli attributi cssRules di un foglio di stile.

È possibile modificare un foglio di stile CSS usando JavaScript?

Non sto parlando di:

document.getElementById('id').style._____='.....';

IO sto parlando di alterazione:

#id {
    param: value;
}

oltre a fare qualcosa di sporco (che non abbiamo ancora provato btw), come creare un nuovo oggetto nella testa, innerHTML un tag di stile lì, ecc. Sebbene questo, anche se funzionasse, poneva alcuni problemi come lo stile il blocco è già definito altrove, e non sono sicuro quando / se il browser analizzerebbe anche un blocco di stile creato in modo dinamico?


Possiamo usare una combinazione di insertRule() e insertRule() per poter fare tutto ciò fino a IE9:

function changeStylesheetRule(stylesheet, selector, property, value) {
    // Make the strings lowercase
    selector = selector.toLowerCase();
    property = property.toLowerCase();
    value = value.toLowerCase();

    // Change it if it exists
    for(var i = 0; i < s.cssRules.length; i++) {
        var rule = s.cssRules[i];
        if(rule.selectorText === selector) {
            rule.style[property] = value;
            return;
        }
    }

    // Add it if it does not
    stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}

// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");

Demo





alter