Cómo obtener y modificar los atributos, clases y estilos del elemento a través de JavaScript

A menudo, las páginas web deben cambiar sus elementos o cómo se ven sus elementos dependiendo de las acciones o opciones del usuario. Cambiar los elementos, atributos, clases y estilos de una página web se realiza con la ayuda del Domina (Modelo de objeto de documento). El DOM se ha establecido como un estándar sobre cómo cada navegador interpretará la página web HTML y cómo accederá a los diferentes elementos en la página web W3C (Consorcio World Wide Web).

JavaScript también interactúa con los elementos de una página HTML usando el DOM, y en esta publicación, vamos a aprender a acceder a los elementos HTML con JavaScript y cómo cambiar sus atributos, clases y estilo usando JavaScript.

Entonces, primero creemos una página HTML con varios elementos utilizando las siguientes líneas de código:

Cambiar mi estilo

Cambiar mi atributo

Cambiar mi clase

Estas líneas de código nos darán la siguiente página web:

Cómo obtener elementos en JavaScript

Antes de ver cómo cambiar elementos usando JavaScript, primero debemos saber cómo obtener elementos en JavaScript. Bueno, para obtener la referencia de Element, podemos usar una de las diversas funciones que proporcionan JavaScript, como:

• getElementById ()
• getElementByClassName ()
• getElementByName ()
• getElementBytagName ()
• getElementBytaGnamens ()

Todos son bastante fáciles de usar y entender por su nombre. Supongamos que tenemos un elemento dentro de nuestro HTML con una identificación de "xyz", Para acceder a los datos de este elemento, usaríamos la siguiente línea en el archivo o etiqueta de script JavaScript:

var obj = documento.getElementById ("xyz");

Del mismo modo, si estamos tratando de acceder a un elemento usando su nombre de clase, usaríamos la función getElementByClassName ().

Cambio de estilo de un elemento

Mirando nuestro archivo HTML, sabemos que el div que dice "cambiar mi estilo" tiene la identificación de "cambia estilo", Así que vamos a acceder a eso con la siguiente línea:

var cs = documento.getElementById ("ChangeStyle");

Ahora, que tenemos nuestra referencia de elementos en la variable "CS", podemos acceder a su función de estilo utilizando la operador de puntos y a partir de ahí podemos cambiar sus diferentes valores de estilo. Por ejemplo, si tuviéramos que cambiar el color de fondo a amarillo, usaríamos la línea:

CS.estilo.backgroundColor = "Yellow";

Después de ejecutar el archivo HTML, verá la siguiente salida:

También puedes ver en la imagen de arriba, que pudimos cambiar el estilo del elemento.

Cambiar la clase de un elemento usando JavaScript

Tenemos el elemento con el ID "Changeclass" que tiene una clase de "MyClass", para cambiar la clase de este elemento, lo primero que debemos hacer es referirnos a este elemento en JavaScript usando la siguiente línea de código:

var cc = documento.getElementById ("Changeclass");

Ahora que tenemos la referencia de elementos en la variable "CC"Podemos acceder a su atributo de clases utilizando el Lista de clase() función. Para agregar una nueva clase "NewClass" en la misma variable, podemos usar la siguiente línea de código:

CC.Lista de clase.Agregar ("NewClass");

Si abre la consola del desarrollador y verifica el atributo de clase, encontrará el siguiente resultado:

Como puede ver, pudo agregar otra clase al atributo de clase del elemento usando JavaScript. Si desea eliminar una clase ya existente de la lista, puede usar la siguiente línea de código:

CC.Lista de clase.eliminar ("myclass");

Después de ejecutar la línea anterior, verá los siguientes resultados en la consola del desarrollador:

Y ahí tienes; Pudió eliminar una clase de la lista de clases de un elemento usando JavaScript.

Cambiar el atributo de elemento

JavaScript tiene una función llamada "setattribute"Que permite al usuario cambiar el valor de cualquier atributo del elemento si puede ser un atributo de" clase "o un atributo de" ID ". Por ejemplo, para cambiar la clase de un elemento, primero apuntemos al elemento que dice: "Cambiar mi atributo, usamos la siguiente línea de código:

var ca = documento.getElementById ("Changeattr");

Y luego podemos usar la función "setAttribute" como:

California.setAttribute ("clase", "hola");

Ahora, podemos observar este cambio en las herramientas del desarrollador como

Incluso podemos asignar nuestros propios atributos al elemento utilizando la función, por ejemplo, si queremos un atributo de "newattr"A este elemento con un valor de"hecho", Podemos agregar eso usando la siguiente línea de código:

California.setAttribute ("newattr", "hecho");

Y si observamos el elemento en la consola del desarrollador, podemos ver el siguiente resultado:

Como está claro en la imagen de arriba, pudimos agregar un nuevo atributo llamado "newattr"A nuestro elemento usando JavaScript.

Conclusión

JavaScript proporciona varias características y funciones que nos ayudan a modificar varias propiedades y atributos de un elemento HTML. Todos estos cambios en un elemento HTML se realizan con la ayuda del modelo de objeto de documento (DOM) a medida que JavaScript interactúa con el DOM para alterar las propiedades de un elemento. Hoy, en esta publicación, aprendimos cómo podemos usar JavaScript y obtener una referencia a un elemento y luego con la ayuda de esa referencia cómo podemos cambiar el estilo de ese elemento, la clase del elemento y cómo podemos alterar el atributos del elemento. Junto con estas alteraciones, incluso aprendimos cómo podemos agregar un nuevo atributo de nuestra elección a un elemento HTML.