Agregar dinámicamente clase CSS con JavaScript

En este post, vamos a aprender cómo agregar dinámicamente CSS class con código JavaScript . Es útil añadir funcionalidad dinámica interactiva?

JavaScript fue construido para proporcionar una interacción. Con JavaScript y CSS combinado la experiencia del usuario se puede mejorar de manera significativa. Esto incluye efectos tales como pantalla algo al hacer clic en un botón. Todo esto sucede con la adición de la capa de JavaScript sobre la CSS.

elemento DOM en JavaScript tiene una propiedad en los llamó ‘classList’, que vuelve a cabo las clases conectados con ese elemento, junto con algunos otros métodos class .

Supongamos un elemento con los siguientes native,

<div id="div" class="one two three four">

El uso de métodos de la incorporado ‘ClassList’ , podemos obtener una gran cantidad de información, como,

Código – JavaScript

var element = document.getElementById('div');
//We have div element in 'element' variable
//Returns the number of classes
console.log(element.classList.length); //Output: 4
//Returns the value of the class attribute
console.log(element.classList.value); //Output: one two three four

Pero, no sólo esto, también podemos añadir o clases EXTRAER utilizando el método incorporado, add () y remove () . Ambos esperan un nombre class cadena que se pueden agregar y quitar respectivamente.

element.classList.add('five');

vamos a entender esto con el ejemplo:

Tenemos un elemento de botón, al hacer clic en el que se mostrará el texto. Así, en primer lugar, vamos a definir el margen de beneficio.

Código – HTML

<button onclick='addClass()'> Show Text </button>
<p id="text" class="text hidden">This is the magic text</p>

Tenemos un elemento de botón, que tiene onclick atributo que activará el addClass () función que hemos definido más adelante. El elemento de párrafo contiene el texto.

Código – CSS

.text {
text-align: center;
}
.hidden {
display: none;
}
.show {
display: block;
}

En este código, nos dirigimos a tres class selectores, todos los cuales son de texto class. Ahora en .hidden selector, se define como propiedad de presentación ninguno , que no mostrará el texto en la página web. El .show class, que vamos a añadir el botón de clic, lo hará sin embargo, debido a display: block; propiedad, mostrará el elemento.

Código – JavaScript

function addClass() {
var text = document.getElementById('text');
text.classList.remove('hidden');
text.classList.add('show');
}

En este código simple, primero seleccione el elemento texto y después de él es classList , retire la oculta class, que se ocultaba el elemento. Y luego añadimos el class espectáculo que mostrará el elemento.

espero que hayan aprendido algo de este artículo. Compartir sus pensamientos y haga sus preguntas en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *