18 votos

cómo cambiar una clase css de estilo a través de javascript?

de acuerdo con el libro que estoy leyendo, es mejor cambiar de un css, por clase cuando se utiliza javascript para cambiar el css. pero, ¿cómo? alguien puede dar un ejemplo de fragmento de código para esto ? gracias de antemano

35voto

Asaph Puntos 56989

Supongamos que usted tiene:

<div id="mydiv" class="oldclass">text</div>

y los siguientes estilos:

.oldclass { color: blue }
.newclass { background-color: yellow }

Usted puede cambiar la clase en mydiv en javascript como este:

document.getElementById('mydiv').className = 'newclass';

Después de la manipulación del árbol DOM usted se quedará con:

<div id="mydiv" class="newclass">text</div>

Si desea agregar una nueva clase css sin quitar el anterior, se puede anexar:

document.getElementById('mydiv').className += ' newClass';

Esto resultará en:

<div id="mydiv" class="oldclass newclass">text</div>

9voto

Andy Shellam Puntos 8120

Recomiendo jQuery. Se vuelve tan simple como:

$('#mydiv').addClass('newclass');

Usted no tiene que preocuparse acerca de la eliminación de la vieja clase, a continuación, como addClass() sólo anexar a la misma. Usted también tiene removeClass();

La otra ventaja más de la getElementById (), el método se puede aplicar a varios elementos al mismo tiempo con una sola línea de código.

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

El primer ejemplo se va a agregar la clase a todos los elementos DIV de la página. El segundo ejemplo se agregará el nuevo clase a todos los elementos que actualmente tienen los viejos de clase.

4voto

Adir Puntos 626

document.getElementById("my").className = 'myclass';

3voto

knittl Puntos 64110

el uso de la className propiedad:

document.getElementById('your_element_s_id').className = 'cssClass';

3voto

Jan Turoň Puntos 6598

Desde classList es compatible con todos los principales navegadores y jQuery gotas de soporte para IE<9 (en 2.x de la rama Stormblack puntos en el comentario), considerando a este HTML

<div id="mydiv" class="oldclass">text</div>

usted cómodamente puede utilizar esta sintaxis:

document.getElementById('mydiv').classList.add("newClass");

Esto resulta en:

<div id="mydiv" class="oldclass newclass">text</div>

además, usted puede también utilizar quitar, cambiar, contiene métodos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: