Cómo cambiar el atributo de estilo de un elemento dinámicamente usando JavaScript?

El modelo de objeto de documento (DOM) proporciona una característica para controlar los estilos dinámicamente en el desarrollo web. Por ejemplo, se integra con JavaScript para proporcionar accesibilidad para modificar las propiedades de los elementos. Es útil cambiar el color, el fondo y el tamaño del texto en diferentes aplicaciones del mundo real. En este artículo, cambiará los atributos de estilo de un elemento utilizando JavaScript.

Cómo cambiar el atributo de estilo de un elemento dinámicamente.

Es fácil modificar el atributo de estilo de un elemento empleando JavaScript. El funcionamiento de esta conversión es el siguiente. En primer lugar, GetElementByid se utiliza para acceder a los elementos de los objetos de documento. Después de eso, se crea un botón que ocurre si el cliente lo presionó. Por lo tanto, se accede a la propiedad de un elemento específico y el usuario cambia dinámicamente el atributo de estilo de un elemento.

Sintaxis

elemento.estilo.Propertyname = "PropertyValue";

Parámetros

La descripción de los parámetros es la siguiente:

• nombre de la propiedad: especifica el nombre de la propiedad como color, tamaño de fuente, etc.
• El valor de la propiedad: representa el valor a asignar a la propiedad de un elemento, E, G, "Rojo".

Ejemplo

Un ejemplo se adapta para cambiar el color del texto accediendo al atributo de estilo de un elemento. El código se proporciona a continuación considerando los atributos de cambio dinámico de estilo.

Código

Un ejemplo para cambiar las propiedades dinámicas

Bienvenido a JavaScript World "

La descripción del código se explica en un orden lógico.

• Se crea un botón pasando el valor "Presiona el botón".
• A "PressBtn ()El método se adjunta a este botón que se activa cuando se llama.
• Después de eso, el método anterior "PressBtn ()"Está escrito dentro etiquetas.
• En este método, mielemento Se utiliza la variable para guardar los atributos del elemento.
• Finalmente, los atributos de estilo de este elemento se cambian dinámicamente cuando el PressBtn () se llama método.

Producción

Después de presionar el botón "Presiona el botón", el PressBtn () Se activa el método, lo que cambia el atributo de estilo de este elemento específico dinámicamente.

Finalmente, el color de texto negro de "Bienvenido a JavaScript"Se cambia a rojo en el navegador utilizando el JavaScript PressBtn () método.

Conclusión:

Primero, se accede al elemento utilizando GetElementByID, y luego el documento.estilo.La propiedad se emplea para cambiar el atributo de estilo del elemento. Por último, un botón está asociado con él, y cuando este botón ha presionado, el estilo del elemento cambia. Este artículo demuestra el posible método para convertir el atributo de estilo en JavaScript.