DOM
Usando gli stili CSS

Osservazioni

Leggere e modificare gli stili in linea

Stile in linea

Puoi manipolare lo stile CSS in linea di un elemento HTML semplicemente leggendo o modificando la sua proprietà di style .

Assumi il seguente elemento:

<div id="element_id" style="color:blue;width:200px;">abc</div>

Con questo JavaScript applicato:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // blue

//Set the color to red
element.style.color = 'red';

//To remove a property, set it to null
element.style.width = null;
element.style.height = null;

Tuttavia, se width: 200px; sono stati impostati in un foglio di stile CSS esterno, element.style.width = null avrebbe avuto effetto. In questo caso, per resettare lo stile, dovresti impostarlo initial : element.style.width = 'initial' .

Lettura e modifica degli stili da un foglio di stile

element.style legge solo le proprietà CSS impostate in linea come attributo elemento. Tuttavia, gli stili sono spesso impostati in un foglio di stile esterno. È possibile accedere allo stile effettivo di un elemento con window.getComputedStyle(element) . Questa funzione restituisce un oggetto contenente il valore calcolato effettivo di tutti gli stili.

Simile all'esempio di lettura e modifica degli stili in linea, ma ora gli stili si trovano in un foglio di stile:

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

JavaScript:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)