Cómo cambiar el valor del atributo de un elemento HTML en JavaScript
Las páginas web están diseñadas con múltiples lenguajes de programación. Dos de estos lenguajes de programación web son HTML y JavaScript. Mientras tanto, HTML es un lenguaje web utilizado para construir la estructura básica de las páginas web, JavaScript se utiliza para incluir contenido dinámico en las páginas web para que sean cautivadores. Ambos tienen diferentes características distintivas que las hacen destacar. Una de esas características es HTML DOM. HTML DOM, que es la abreviatura de Modelo de objeto de documento, permite a JavaScript cambiar el contenido de los elementos HTML.
Con el fin de cambiar el valor de atributo de un elemento HTML utilizando JavaScript, HTML DOM proporciona múltiples métodos. Usando estos métodos, puede alterar el valor de atributo de un elemento HTML de las siguientes maneras:
- Uso del método getAttribute ()
- Uso del método setattribute ()
Discutamos cada uno de estos en detalle.
Obtener atributo
Como su nombre indica, el método getAttribute () es extraer el valor actual del atributo. La sintaxis del método getAttribute () es la siguiente.
Sintaxis del método getAttribute ()
elemento.getAttribute (AttributeName);Veamos un ejemplo para una mayor comprensión.
Ejemplo
Supongamos que desea cambiar el valor del atributo SRC del elemento.
El código de arriba muestra una imagen de la naturaleza.
Ahora queremos cambiar esta imagen de perro a una imagen de gato. Usamos el siguiente código.
El ejemplo completo con la salida se muestra a continuación.
La imagen de la naturaleza se cambia a la imagen de nieve
Establecer atributo
Para establecer un atributo en un elemento específico, usamos el método setattribute (). Actualiza el valor de un atributo existente en un elemento o establece un nuevo atributo con un nuevo nombre y valor en un elemento si uno no existe. La sintaxis de este método es la siguiente.
Sintaxis del método setattribute ()
elemento.setAttribute (AttributeName, AttributeValue);Veamos un ejemplo para comprender mejor el método.
Ejemplo:
Primero creamos un botón simple con una etiqueta de "Haga clic aquí".
Ahora tenemos que seleccionar el elemento y lo haremos usando su identificación.
var btn = documento.getElementById ("mybtn");Ahora usaremos el método setattribute () para establecer nuevos atributos.
btn.setAttribute ("class", "Click-btn");btn.setAttribute ("enable", "");
El código completo junto con la salida se muestra a continuación.
Conclusión
Para cambiar el valor de atributo de un elemento HTML HTML DOM proporciona dos métodos que son getAttribute () y setAttribute (). GetAttribute () se usa para extraer el valor actual del atributo mientras que SetAttribute () se usa para alterar el valor del atributo. En este tutorial, ambos métodos se discuten en detalle junto con ejemplos adecuados.