Cambiar hoja de estilos css con javascript

Css-in-js

además de hacer algo sucio (que aún no hemos probado, por cierto), como crear un nuevo objeto en el head, innerHTML una etiqueta de estilo allí, etc. Aunque esto, incluso si funcionara, plantearía algunos problemas, ya que el bloque de estilo ya está definido en otro lugar, y no estoy seguro de cuándo/si el navegador podría incluso analizar un bloque de estilo creado dinámicamente.

Cuando quiero añadir programáticamente un montón de estilos a un objeto, me parece más fácil añadir programáticamente una clase al objeto (dicha clase tiene estilos asociados a ella en su CSS). Puedes controlar el orden de precedencia en tu CSS para que los nuevos estilos de la nueva clase puedan anular los que tenías anteriormente. Esto es generalmente mucho más fácil que modificar una hoja de estilos directamente y funciona perfectamente entre navegadores.

Javascript cambia el estilo de un elemento

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.

Getelementbyid set style

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. Inicialmente definidas en la recomendación de estilo de 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).

Html cambiar estilo css dinámicamente

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 quieres dar a los visitantes del sitio la opción de cambiar los estilos de tu sitio dinámicamente, usando algunos controles de botón quizás. 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.