Cambiar estilo css con javascript

Clase de cambio de javascript

En cualquier página web, veremos desde unas pocas hasta MUCHAS reglas de estilo, cada una de las cuales se superpone bellamente para dar estilo a todo lo que vemos. Sin embargo, este no es el único enfoque que podemos usar para estilizar el contenido usando CSS. No sería HTML si no hubiera múltiples formas de realizar la misma tarea.

Hay muchos casos, especialmente a medida que nuestro contenido se vuelve más interactivo, en los que queremos que los estilos se activen dinámicamente en función de la entrada del usuario, que se ejecute algún código en segundo plano, etc. En este tipo de escenarios, el modelo CSS que implica reglas de estilo o estilos en línea no nos ayudará. Mientras que los pseudoselectores como hover proporcionan algo de apoyo, todavía estamos muy limitados en lo que podemos hacer.

Por último, algunas propiedades CSS requieren que se proporcione un valor más complejo con un montón de texto aleatorio seguido del valor que nos interesa. Una de las más populares en esta categoría es la propiedad transform. Un enfoque para establecer un valor complejo es utilizar la antigua concatenación de cadenas:

Estilo en javascript

HTMLElement.styleLa propiedad de sólo lectura style devuelve el estilo en línea de un elemento en forma de un objeto CSSStyleDeclaration que contiene una lista de todas las propiedades de estilo para ese elemento con valores asignados para los atributos que están definidos en el atributo inline style del elemento.

Nota: Consulte la Referencia de Propiedades CSS para obtener una lista de las propiedades CSS accesibles a través de style. La propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que una declaración de estilo en línea establecida a través del atributo style.

Establecer estilosAunque esta propiedad se considera de sólo lectura, es posible establecer un estilo en línea asignando una cadena directamente a la propiedad style. En este caso, la cadena se envía a CSSStyleDeclaration.cssText. El uso del estilo de esta manera sobrescribirá completamente todos los estilos en línea del elemento.

Por lo tanto, para añadir estilos específicos a un elemento sin alterar otros valores de estilo, generalmente es preferible establecer propiedades individuales en el objeto CSSStyleDeclaration. Por ejemplo, element.style.backgroundColor = «rojo».

Javascript cambia el estilo de un elemento

Element.setAttribute(name, value);1Element.setAttribute(name, value); Al pasar el atributo de estilo como nombre y las propiedades CSS como valor en una cadena, el atributo de estilo se anexará en el elemento con todos los valores. Veamos el código de ejemplo.

console.log(Window.getComputedStyle(title));12console.log(title.style);console.log(Window.getComputedStyle(title)); Añadir y eliminar nombres de clases del elemento Esto es útil cuando ya tenemos estilos definidos en la hoja de estilos. Pero condicionalmente queremos cambiar los nombres de las clases.Para hacer esto también tenemos que acceder al elemento donde queremos añadir, quitar o alternar los nombres de las clases.Tomemos el ejemplo del título anterior :

//Para eliminar un nombre de clase del elemento title podemos utilizar classList.remove(className)

//border es el nombre de clase que queremos eliminar12title.classList.remove(‘border’); //border es el nombre de clase que queremos eliminar Para alternar un nombre de clase al hacer clic en el elemento podemos utilizar classList.toggle(className)

Javascript cambiar color de fondo css

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.