Javascript cambiar el color de fondo
La última pieza del puzzle es la declaración style.setProperty. Esto nos permite consultar directamente la variable dentro de la cual se almacenan los datos de la variable. Vale la pena señalar que este método funciona para cualquier propiedad/elemento CSS, por lo que no se limita sólo a las variables CSS.
Este método puede ser implementado en un gran número de casos de uso. Por ejemplo, puede crear un widget personalizado para permitir a los usuarios cambiar el tamaño de la fuente del contenido del cuerpo. Además, este método se puede utilizar para aplicar varios filtros a las imágenes y permitir a los usuarios una vista previa de los diferentes resultados.
Javascript cambia la propiedad de la clase 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.
Cómo cambiar el estilo de los elementos js
Artículo Actionswill-changeLa propiedad CSS will-change indica a los navegadores cómo se espera que cambie un elemento. Los navegadores pueden establecer optimizaciones antes de que un elemento cambie realmente. Este tipo de optimizaciones puede aumentar la capacidad de respuesta de una página al realizar un trabajo potencialmente costoso antes de que sea realmente necesario.
Indica que el autor espera animar o cambiar la propiedad con el nombre dado en el elemento en un futuro próximo. Si la propiedad dada es una abreviatura, indica la expectativa para todas las abreviaturas a las que se expande la abreviatura. No puede ser uno de los siguientes valores: unset, initial, inherit, will-change, auto, scroll-position, o contents. La especificación no define el comportamiento del valor particular, pero es común que transforme sea una pista de la capa de composición. Chrome actualmente realiza dos acciones, dados los identes de propiedades CSS particulares: establecer una nueva capa de composición o un nuevo contexto de apilamiento.
A través de la hoja de estilosPuede ser apropiado incluir will-change en tu hoja de estilos para una aplicación que hace cambios de página al pulsar las teclas, como un álbum o una presentación de diapositivas donde las páginas son grandes y complejas. Esto permitirá al navegador preparar la transición con antelación y permitir transiciones rápidas entre las páginas tan pronto como se pulse la tecla. Pero tenga cuidado con la propiedad will-change directamente en las hojas de estilo. Puede hacer que el navegador mantenga la optimización en memoria durante mucho más tiempo del necesario.
Color de fondo estilo Javascript
</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