Cómo cambiar el estilo HTML a través de JavaScript
HTML DOM AcronyM para el modelo de objeto de documento es una interfaz de programación para documentos escritos en HTML y XML. Proporciona una estructura lógica a los documentos. HTML DOM define cómo se pueden evaluar y cambiar los documentos HTML. Usando HTML DOM, puede alterar el estilo de los elementos HTML a través de JavaScript.
La propiedad de estilo de HTML DOM se utiliza con el fin de cambiar el estilo de los elementos HTML.
Propiedad de estilo de HTML DOM
Un atributo de estilo de un elemento HTML está representado por un objeto CSSStyledEclaration. Para devolver este objeto CSSStyledEclaration, se utiliza la propiedad de estilo. Esta propiedad se utiliza para obtener o establecer el estilo de elementos utilizando varias propiedades CSS.
Sintaxis
La sintaxis de la propiedad de estilo HTML DOM se da de la siguiente manera.
documento.getElementById (ID).estilo.propiedad = nuevo estiloSi simplemente desea obtener una propiedad de estilo, use la siguiente sintaxis.
elemento.estilo.propiedadSin embargo, si desea establecer una propiedad de estilo, use la sintaxis dada
elemento.estilo.propiedad = valorAhora que tenemos una comprensión básica de lo que es la propiedad de estilo HTML DOM. Ahora exploraremos algunos ejemplos relevantes.
Cambio de estilo HTML
Los ejemplos dados demuestran cómo podemos cambiar el estilo de los elementos HTML usando JavaScript.
Ejemplo 1
Supongamos que quieres cambiar el color de
elemento usando su identificación.
Propiedad de estilo HTML DOM
Propiedad de estilo HTML DOM
En el ejemplo anterior, primero definimos simplemente dos
elementos y les asignó una identificación única.
Propiedad de estilo HTML DOM
Propiedad de estilo HTML DOM
Luego cambiamos el color de
elemento con id = "para2". En la siguiente pieza de código donde simplemente obtenemos nuestro elemento deseado por su identificación y cambiando su color a rojo.
Así es como se veía antes de cambiar el color.
Después de cambiar el color.
Ejemplo 2
Supongamos que desea cambiar el color y la familia de la fuente de
elemento usando su identificación.
Aprender HTML DOM
Aprender HTML DOM
En el ejemplo anterior, primero definimos simplemente dos
elementos y les asignó una identificación única. Aprender HTML DOM
Aprender HTML DOM
Luego cambiamos el color y la familia de fuentes de
elemento con id = "head2". En la siguiente pieza de código donde simplemente obtenemos nuestro elemento deseado por su identificación y cambiamos su color a la familia azul y de fuentes a Arial.
Error de Geshi: Geshi no pudo encontrar el lenguaje JacAscript (usando Path/Home/Nginx/Domains/Linuxhint.com/public/WP-Content/Plugins/CodeColorer/Lib/Geshi/) (Código 2)
Así es como se veía antes de cambiar el color y la familia de fuentes.
Después de cambiar el color y la familia de fuentes, se ve así.
Conclusión
Para alterar el estilo de los elementos HTML usando JavaScript, utilizamos la propiedad de estilo HTML DOM. La propiedad HTML DOM Style le permite obtener o establecer el estilo de un elemento HTML. Puede haber diferentes enfoques para usar esta propiedad para alterar el estilo de los elementos HTML. Este tutorial cubre la propiedad de estilo HTML DOM y los diferentes enfoques que pueden usarse para cambiar el estilo de los elementos HTML.