Cambiar atributo en JavaScript
Este tutorial discutirá cómo cambiar el atributo de un elemento usando la función setAttribute() en JavaScript.
Cambiar el Atributo de un Elemento Usando la Función setAttribute() en JavaScript
Podemos cambiar el atributo de un elemento HTML usando la función setAttribute() en JavaScript.
Supongamos que el elemento HTML ya tiene un atributo. En ese caso, la función setAttribute() actualizará el atributo anterior, y si el elemento HTML no tiene un atributo, la función setAttribute() agregará un nuevo atributo al elemento.
La sintaxis básica de la función setAttribute() se encuentra a continuación.
element.setAttribute(name, value)
La función setAttribute() acepta dos argumentos, nombre y valor, como se muestra en la sintaxis anterior. El argumento nombre es una cadena que especifica el nombre del atributo como clase e id.
El argumento value de la función setAttribute() también es una cadena, y se usa para establecer el valor del argumento cuyo nombre se da como primer argumento. La función setAttribute() no devuelve ningún valor.
El elemento en la sintaxis anterior es el elemento cuyo atributo queremos establecer. Podemos obtener un elemento HTML en JavaScript usando muchas funciones como querySelector(), getElementById(), getElementByClassName(), y muchas más.
La sintaxis básica de todas las funciones anteriores se proporciona a continuación.
const MyElement = document.querySelector(ElementName);
const MyElement = document.getElementById(ElementID);
const MyElement = document.getElementByClassName(ElementClassName);
En la sintaxis anterior, la función querySelector() acepta un valor de cadena que especifica el nombre del elemento como div, h1, etc. La función getElementById() acepta un valor de cadena que especifica el id del elemento, que podemos dar a cualquier elemento HTML usando la palabra clave id.
La función getElementByClassName() acepta un valor de cadena que especifica el nombre de la clase del elemento, que podemos dar a cualquier elemento HTML usando la palabra clave clase. Todas las funciones anteriores devuelven elementos únicos y múltiples si la cadena de entrada de la función se usa con múltiples elementos HTML.
En el caso de múltiples elementos, el atributo de todos los elementos cambiará. Si queremos establecer el atributo de un solo elemento, tenemos que dar a cada elemento un nombre de clase o ID diferente.
Por ejemplo, establezcamos el atributo clase de un elemento usando la función setAttribute(). Vea el código a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test1 {
font-size: 50px;
color: blue;
}
.test2 {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="test1">set attribute</h1>
<script>
const MyElement = document.getElementById("id1");
MyElement.setAttribute("class", "test2");
</script>
</body>
</html>
Producción:
En el código anterior, usamos la etiqueta h1 para mostrar un texto y agregamos una identificación y un nombre de clase al elemento. Hemos usado la etiqueta estilo para crear dos estilos que usaremos para cambiar el atributo de la etiqueta h1.
Hemos usado la etiqueta script dentro de la etiqueta body para escribir código JavaScript. Dentro de la etiqueta script, hemos usado la función getElementById() para obtener el elemento usando su id, y hemos cambiado su clase de test1 a test2 usando la función setAttribute().
Podemos ver en el resultado anterior que el color del texto y el tamaño de fuente han cambiado.
Ambos estilos, test1 y test2, contienen diferentes colores y tamaños de fuente. Dentro del código anterior, le hemos dado el nombre de clase test1 a la etiqueta h1, que contiene color azul, pero hemos cambiado el atributo de clase a test2 dentro de la etiqueta script, por lo que el color de la salida es roja.
En el código anterior, hemos cambiado el atributo clase, pero también podemos cambiar otros atributos como el atributo id o nombre de un elemento. Podemos usar la función getAttribute() para obtener el atributo de un elemento, y podemos usar la función removeAttribute() para eliminar el atributo existente de un elemento.
