Modifica dei valori CSS con Javascript


Answers

Per favore! Basta chiedere a w3 ( http://www.quirksmode.org/dom/w3c_css.html )! O in realtà, mi ci sono volute cinque ore ... ma eccolo qui!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

La funzione è davvero facile da usare .. esempio:

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

Oh..

EDIT: come @ user21820 descritto nella sua risposta, potrebbe essere un po 'inutile cambiare tutti i fogli di stile sulla pagina. Il seguente script funziona con IE5.5 e l'ultimo Google Chrome, e aggiunge solo la funzione css () sopra descritta.

(function (scope) {
    // Create a new stylesheet in the bottom
    // of <head>, where the css rules will go
    var style = document.createElement('style');
    document.head.appendChild(style);
    var stylesheet = style.sheet;
    scope.css = function (selector, property, value) {
        // Append the rule (Major browsers)
        try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
        } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
        } catch(err) {console.log("Couldn't add style");}} // (alien browsers)
    }
})(window);
Question

È facile impostare valori CSS incorporati con javascript. Se voglio cambiare la larghezza e ho html in questo modo:

<div style="width: 10px"></div>

Tutto quello che devo fare è:

document.getElementById('id').style.width = value;

Cambierà i valori del foglio di stile inline. Normalmente questo non è un problema, perché lo stile in linea sovrascrive il foglio di stile. Esempio:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Usando questo Javascript:

document.getElementById('tId').style.width = "30%";

Ottengo il seguente:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

Questo è un problema, perché non solo non voglio cambiare i valori inline, Se cerco la larghezza prima di impostarla, quando ho:

<div id="tId"></div>

Il valore restituito è Null, quindi se ho Javascript che ha bisogno di conoscere la larghezza di qualcosa per fare un po 'di logica (aumento la larghezza dell'1%, non di un valore specifico), recupero di Null quando mi aspetto che la stringa "50% "non funziona davvero.

Quindi la mia domanda: ho dei valori in uno stile CSS che non si trovano in linea, come posso ottenere questi valori? Come posso modificare lo stile al posto dei valori inline, dato un id?




Non so perché le altre soluzioni passano attraverso l'intero elenco di fogli di stile per il documento. In questo modo crea una nuova voce in ogni foglio di stile, che è inefficiente. Invece, possiamo semplicemente aggiungere un nuovo foglio di stile e aggiungere semplicemente le nostre regole CSS desiderate.

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

Si noti che possiamo sovrascrivere anche gli stili in linea impostati direttamente sugli elementi aggiungendo "! Important" al valore della proprietà, a meno che esistano già dichiarazioni di stile "! Important" più specifiche per quella proprietà.




Puoi ottenere gli stili "calcolati" di qualsiasi elemento.

IE usa qualcosa chiamato "currentStyle", Firefox (e presumo altri browser "compatibili") usa "defaultView.getComputedStyle".

Avrai bisogno di scrivere una funzione cross browser per farlo, o usare un buon framework Javascript come prototipo o jQuery (cerca "getStyle" nel file javascript prototipo e "curCss" nel file javascript jquery).

Detto questo, se hai bisogno dell'altezza o della larghezza dovresti probabilmente usare element.offsetHeight e element.offsetWidth.

Il valore restituito è Nullo, quindi se ho Javascript che ha bisogno di conoscere la larghezza di qualcosa per fare un po 'di logica (aumento la larghezza dell'1%, non di un valore specifico)

Attenzione, se aggiungi uno stile in linea all'elemento in questione, può agire come valore "predefinito" e sarà leggibile da Javascript al caricamento della pagina, poiché è la proprietà di stile in linea dell'elemento:

<div style="width:50%">....</div>



Questo semplice esempio di 32 righe ti consente di identificare un dato foglio di stile e cambiare i suoi stili molto facilmente:

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");