Cambiar estilos css con javascript

Inicio » Cambiar estilos css con javascript

Clase de cambio de Javascript

HTMLElement.styleLa propiedad style de sólo lectura 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”.

Jquery cambiar 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.

Css-in-js

Uso de la información de estilo dinámicoEl Modelo de Objetos CSS (CSSOM), que forma parte del DOM, expone interfaces específicas que permiten manipular una amplia cantidad de información relativa a CSS. Definidas inicialmente en la recomendación de estilo del nivel 2 del DOM, estas interfaces forman ahora una especificación, el Modelo de Objetos CSS (CSSOM), que pretende sustituirlo.

El objeto de estilo básico expone las interfaces Stylesheet y CSSStylesheet. Estas interfaces contienen miembros como insertRule, selectorText y parentStyleSheet para acceder y manipular las reglas de estilo individuales que componen una hoja de estilos CSS.

Para modificar los estilos de un documento utilizando la sintaxis CSS, se pueden insertar reglas o insertar etiquetas <style> cuya propiedad innerHTML se establezca en el CSS deseado.Modificar el estilo de un elementoLa propiedad style del elemento (véase también la sección “Objeto de estilo DOM” más adelante) también puede utilizarse para obtener y establecer los estilos de un elemento. Sin embargo, esta propiedad sólo devuelve los atributos de estilo que se han establecido en línea (por ejemplo, <td style=”background-color: lightblue”> devuelve la cadena “background-color:lightblue”, o directamente para ese elemento usando element.style.propertyName, aunque pueda haber otros estilos en el elemento desde una hoja de estilos).

Javascript cambia el estilo de div

</html>Después de ejecutar el código anterior obtendremos lo siguiente en el navegador.Después de hacer clic en los botones anteriores el primer texto se cambiará a un tamaño de fuente diferente y el segundo texto se cambiará a un estilo de fuente diferente como se muestra en la salida.Ejemplo de salida-2En el siguiente ejemplo el color del texto ha cambiado a azul utilizando el comando de estilo “style.color”.Demostración en vivo<html>

</html>Después de ejecutar el código anterior obtendremos lo siguiente en la ventana del navegador.  Al hacer clic en el botón “color me” el color del texto proporcionado se cambiará a ‘azul’ como se muestra en la salida.Salida

Ir arriba