DOM
Usando estilos CSS

Observaciones

Leyendo y cambiando estilos en línea.

Estilo en linea

Puede manipular el estilo CSS en línea de un elemento HTML simplemente leyendo o editando su propiedad de style .

Supongamos el siguiente elemento:

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

Con este JavaScript aplicado:

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;

Sin embargo, si width: 200px; se establecieron en una hoja de estilo CSS externa, element.style.width = null no tendría ningún efecto. En este caso, para restablecer el estilo, tendría que configurarlo en initial : element.style.width = 'initial' .

Leyendo y cambiando estilos de una hoja de estilo

element.style solo lee las propiedades CSS establecidas en línea, como un atributo de elemento. Sin embargo, los estilos a menudo se establecen en una hoja de estilo externa. Se puede acceder al estilo real de un elemento con window.getComputedStyle(element) . Esta función devuelve un objeto que contiene el valor real calculado de todos los estilos.

Similar al ejemplo de lectura y cambio de estilos en línea, pero ahora los estilos están en una hoja de estilo:

<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)