jQuery attr(): Obtener y modificar valores en los atributos de los elementos del DOM

Repaso a la función de jQuery attr() que vale para obtener y/o modificar valores en los atributos de los diferentes elementos del DOM de una página web.

attr() se suele combinar con la función each() a la hora de recorrer elementos y trabajando con selectores. Otras funciones similares son estas:

• css()
• animate()
• addclass() y removeclass()
• val()

Sintaxis de jQuery attr()

Cuando attr() se usa para obtener el valor de un atributo devuelve el valor del primer elemento encontrado. Veamos su sintaxis extraída de su web oficial:

$(selector).attr(atributo)

De esta manera obtendríamos el valor del atributo seleccionado, os explico los parámetros:

• selector (Obligatorio): Elemento que queremos examinar a nivel de atributos.
• atributo (Obligatorio): Atributo del cual queremos obtener su valor.

En cambio, cuando se usa para modificar/asignar valores en los atributos se aplica a todos los elementos especificados. Las sintaxis posibles en este caso serían las siguiente:

/* Sintaxis por defecto */$(selector).attr(atributo, valor)

/* Modificar valor usando una funcion */$(selector).attr(atributo,function(index,valor))

/* Modificar multiples valores en otros tantos atributos */$(selector).attr({atributo1:valor1, atributo2:valor2,...})

Os explico los parámetros:

• selector (Obligatorio): Elemento que queremos examinar a nivel de atributos.
• atributo (Obligatorio): Atributo del cual queremos obtener su valor.
• valor (Obligatorio): Valor que queremos aplicar al atributo.
• index (Obligatorio): Posición del elemento en el DOM en caso de haber varios.

Ejemplo de jQuery attr() para obtener el valor de un atributo

Vamos con el primer ejemplo de attr() para conseguir el valor de un atributo:

$(document).ready(function(){
     $("#boton").click(function(){
         alert("El texto del botón es --> " + $("#boton").attr("value"));
     });
});

Os explico el ejemplo:

• Detectamos el click del botón con id = ‘boton’.
• Sacamos por pantalla un mensaje con el valor del atributo ‘value’ del botón.

El código HTML del ejemplo es el siguiente:

<p><input type="button" id="boton" value="Clicka para obtener el valor del atributo value del botón"></p>

Ejemplo de jQuery attr() para modificar el valor de un atributo

Vamos con el segundo ejemplo de attr() para modificar el valor de un atributo:

$(document).ready(function(){
     $("#boton").click(function(){
         $("#boton").attr("value","OTRO TEXTO");
     });
});

Os explico el ejemplo:

• Detectamos el click del botón con id = ‘boton’.
• Modificamos el valor del atributo ‘value’ del botón por «OTRO TEXTO».

El código HTML del ejemplo es el siguiente:

<p><input type="button" id="boton" value="Clicka para obtener el valor del atributo value del botón"></p>

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM