Javascript añadir clase al cuerpo
También puede añadir nuevas hojas de estilo a la página – puede utilizar la función document.createElement para crear un nuevo elemento de estilo. Esto es útil cuando se quiere dar a los visitantes del sitio la opción de cambiar los estilos de su sitio de forma dinámica, utilizando algunos controles de botón tal vez. Aquí hay un ejemplo rápido de cómo podría crear una nueva hoja de estilo:
También puede utilizar las propiedades de la hoja de estilo para ayudar a diferenciar entre varias hojas de estilo en la página. La propiedad src puede ayudarte a identificar hojas de estilo externas, pero no te ayudará a referenciar elementos de estilo internos. Una forma mejor, que le permite referenciar tanto las hojas de estilo internas como las externas de forma individual, es utilizar la propiedad title. Si itera a través de document.styleSheets puede diferenciar entre las diferentes hojas de estilo que ha incluido en la página. El siguiente ejemplo muestra cómo puede realizar esta iteración:
Para cada objeto hoja de estilo recuperado del array styleSheets puedes acceder a su propiedad title para comprobar si tiene el título que nuestro código está buscando. Puedes ver un ejemplo funcional de esto en el ejemplo de adición y eliminación de reglas, que discutiré en la siguiente sección.
Eliminar la clase javascript
La interfaz DOMTokenList tiene dos propiedades, value y length. For classList, the value property returns a list of class names as a string and the length property gives the number of classes stored in the object.
If, however, the class name already exists in the <div> element’s class attribute, the add() method will ignore it. The following statement will have no effect, as the class petal already exists in the class attribute.
Often we do such toggle on occurance of some events, like click. Suppose we have a lone <button/> element in our example above. This code toggles the class thorn for the<div/> element on click of it.
Lista de clases de Javascript
Las clases CSS son una herramienta práctica para cambiar estilos y reproducir animaciones mediante programación. Por ejemplo, un controlador de Stimulus podría añadir una clase «loading» a un elemento cuando esté realizando una operación en segundo plano, y luego dar estilo a esa clase en CSS para mostrar un indicador de progreso:
Construya un atributo de clase CSS uniendo el identificador del controlador y el nombre lógico en el formato data-[identificador]-[nombre lógico]-clase. El valor del atributo puede ser un único nombre de clase CSS o una lista de varios nombres de clase.
Añadir clase javascript
Prefiero no tener que añadir ningún espacio vacío y el manejo de entradas duplicadas por mí mismo (lo cual es necesario cuando se utiliza el enfoque document.className). Hay algunas limitaciones de los navegadores, pero se puede trabajar alrededor de ellos usando polyfills.
Sé que IE9 está apagado oficialmente y podemos lograrlo con element.classList como muchos dijeron arriba, pero sólo traté de aprender cómo funciona sin classList con la ayuda de muchas respuestas de arriba pude aprenderlo.
Puedes usar el API querySelector para seleccionar tu elemento y luego crear una función con el elemento y el nuevo classname como parámetros. Usando classlist para los navegadores modernos, sino para IE8. Entonces puedes llamar a la función después de un evento.
En mi caso, tenía más de una clase llamada main-wrapper en el DOM, pero sólo quería afectar al main-wrapper padre. Usando :first Selector (https://api.jquery.com/first-selector/), podía seleccionar el primer elemento del DOM que coincidiera. Esta fue la solución para mí: