> Manuales > Manual de jQuery

Última actualización: 23 de marzo de 2023

Explicaciones detalladas y ejemplos del método attr() de jQuery, que sirve para recuperar y cambiar los atributos de los elementos de la página.

Acceder y modificar atributos HTML desde jQuery

En este artículo del Manual de jQuery estamos recorriendo poco a poco la documentación de la popular librería Javascript, para ofrecer a los lectores de DesarrolloWeb.com explicaciones detalladas de las clases y métodos disponibles en ella. Ha llegado el momento de hablar del método attr() que sirve para trabajar con los atributos de los elementos de la página.

Veremos que attr(), como muchos otros métodos en jQuery, tiene diferentes usos, dependiendo de los parámetros que le pasemos, pero siempre sirve para trabajar con los atributos HTML, como pueden ser title, height, width, href, src, etc.

Método attr() de jQuery

El uso es bien simple. Dado un objeto jQuery, invocando el método attr() sobre él, podemos acceder a sus atributos, para recuperar sus valores o modificarlos. Veremos los distintos usos conforme los parámetros que le pasemos.

Antes de empezar, vale la pena comentar que la información que encontraréis en este artículo se complementa con el siguiente texto, en el que veremos otros usos de la función attr().

Lectura de un atributo

El primer uso de attr() consiste en recuperar el valor de un atributo. En este caso, el método debe recibir por parámetro únicamente una cadena, con el nombre del atributo que queremos recuperar. 

attr("nombre_del_atributo_a_acceder")

Pensemos por ejemplo en un campo INPUT de texto: 

<input type="text" value="loquesea" id="campotexto">

Ahora podríamos acceder al atributo type del campo de texto con este código: 

$("#campotexto").attr("type")

Caso especial con propiedades de los elementos

Ahora quiero adelantar un caso especial, que consiste en acceder al value del campo INPUT. Quizás pensaríamos que usar el método attr() sería lo adecuado, con un código como este: 

$("#campotexto").attr("value")

Esto en principio podría acarrear problemas, ya que el método attr() siempre nos va a dar el valor del atributo value y no de la propiedad value como la mayoría esperaríamos.

El resultado de ejecutar ese código nos entregaría siempre el primer valor que había escrito en el campo de texto (el value que había originalmente en el código HTML al cargarse la página), pero no el valor actual que el usuario podría haber cambiado. De momento dejo aquí esta situación ya anunciada pero no vamos a profundizar en ella, ya que es materia de estudio de un artículo más adelante: Método prop() de jQuery y diferencias con attr().

Vamos a ver un código de una página completa donde se está accediendo con attr a los valores del input: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trabajando con inputs</title>
</head>
<body>
  <form>
    <input type="text" value="loquesea" id="campotexto">
  </form>
  <p>
    <button id="recuperarType">Recuperar el type del input</button>
  </p>
  <p>
    <button id="recuperarValueInicial">Recuperar el value inicial del input</button>
  </p>

  <script src="../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready(function() {
      let inputElement = $("#campotexto");
      $("#recuperarType").click(function() {
        console.log(inputElement.attr("type"));
      });
      $("#recuperarValueInicial").click(function () {
        console.log(inputElement.attr("value"));
      });
    });
  </script>
</body>
</html>

Cambios en atributos

Podemos cambiar el valor de un atributo usando el mismo método attr(), pero en este caso tendremos que enviarle dos argumentos.

Vamos a verlo con un ejemplo sencillo, en el que tenemos una imagen en nuestra página web:

<img src="https://placehold.co/300x100/red/white" alt="imagen placeholder" id="imagen">

Ahora, supongamos que deseamos cambiar el atributo src. Entonces lo podríamos hacer de esta manera:

$("#imagen").attr("src", "https://placehold.co/300x100/blue/yellow");

Otro atributo que podríamos cambiar es el alt de la imagen, para colocar cualquier otro texto que queramos:

$("#imagen").attr("alt", "Este es el nuevo alt de la imagen");

Si inspeccionas el HTML con la consola para desarrolladores de tu navegador, cada vez que cambiamos el atributo del elemento, se actualiza el valor de ese atributo en el código HTML que está siendo interpretado por el navegador.

Te dejamos aquí un ejemplo completo de página donde hemos hecho el cambio de estos atributos sobre una imagen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cambiar atributo src</title>
</head>
<body>
  <p>
    <img src="https://placehold.co/300x100/red/white" alt="imagen placeholder" id="imagen">
  </p>
  <p>
    <button id="cambiarImagenAzul">Cambiar imagen a azul</button>
    <button id="cambiarImagenVerde">Cambiar imagen a verde</button>
    <button id="cambiarAlt">Cambiar atributo alt</button>
  </p>
  <script src="../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready(function () {
      $("#cambiarImagenAzul").click(function () {
        $("#imagen").attr("src", "https://placehold.co/300x100/blue/yellow");
      });
      $("#cambiarImagenVerde").click(function () {
        $("#imagen").attr("src", "https://placehold.co/300x100/green/aqua");
      });
      $("#cambiarAlt").click(function () {
        $("#imagen").attr("alt", "Este es el nuevo alt de la imagen");
      });
    });
  </script>
</body>
</html>

Recorridos a colecciones de elementos para acceder a sus atributos

En todos los ejemplos anteriores teníamos un único elemento al que queríamos cambiar el atributo. Sin embargo, debemos prestar atención en el caso que invoquemos el método attr() sobre un objeto jQuery que contenga varios elementos a la vez. En este caso attr() devolvería el valor del atributo del primero de los elementos que haya en el objeto jQuery.

Además, en caso que el elemento no tenga definido ese atributo al que se pretenda acceder, devolvería undefined.

Veamos un ejemplo también simple, pero un poco más elaborado. Tenemos varios enlaces en la página, con este código HTML: 

<a href="http://www.elpais.com" title="Diario El País">El País</a>
<br>
<a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
<br>
<a href="http://es.openoffice.org/" title="Siute de programas de oficina">Open Office</a>

Si hacemos algo como esto: 

$("a").attr("title")

Obtendremos el valor del atributo title del primero de los enlaces. Como tenemos tres enlaces en la página, $("a") nos devolvería un objeto jQuery que contiene esos tres enlaces, pues recordar, que attr("title") devuelve el valor del atributo "title" del primero de los elementos del objeto jQuery.

Ahora bien, si quisiéramos obtener el valor del atributo "title" de todos los elementos, tendríamos que hacer un recorrido a cada uno de los enlaces con el método each() del core de jQuery.

Veamos un ejemplo de una página completa que hace ese recorrido con each para recuperar todos los valores de los atributos title de los enlaces que haya en la página: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>método de attr cuando tenemos varios elementos</title>
</head>
<body>
  <p>
    <a href="http://www.elpais.com" title="Diario El País">El País</a>
    <br>
    <a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
    <br>
    <a href="http://es.openoffice.org/" title="Suite de programas de oficina">Open Office</a>
  </p>
  <p>
    <button id="primerTitle">Acceder solo al primer title</button>
    <button id="todosTitles">Acceder a todos los title</button>
  </p>
  <script src="../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready(function () {
      $("#primerTitle").click(function () {
        alert($("a").attr("title"));
      });

      $("#todosTitles").click(function () {
        $("a").each(function(i) {
          var titulo = $(this).attr("title");
          alert("Atributo title del enlace " + i + ": " + titulo);
        });
      });
    });
  </script>
</body>
</html>

Recorridos a objetos jQuery para cambiar sus atributos

Bien, ahora queremos mostrar un último código que nos permitiría hacer un recorrido para cambiar todos los atributos de una colección de objetos.

Seguimos iterando por todos los enlaces que había en la página y para cada uno le vamos a colocar el mismo valor del atributo title y del atributo href. Lo podríamos conseguir con un código como este:

$("a").each(function() {
  let enlace = $(this);
  enlace.attr('title', 'Title modificado por jQuery');
  enlace.attr('href', 'https://www.desarrolloweb.com');
  enlace.css('color', 'orange');
});

A partir de la ejecución del código anterior todos los title de los enlaces tendrán el valor "Title modificado por jQuery". Las URLs a las que enlazarán los link serán siempre la home de Desarrollo Web y además se les creará un estilo CSS para que sean de color naranja.

Vamos a dejarte el código completo de la página que implementa este ejemplo, por si la quieres copiar y pegar en un archivo en tu ordenador para ponerla en marcha.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>método de attr cuando tenemos varios elementos</title>
</head>
<body>
  <p>
    <a href="http://www.elpais.com" title="Diario El País">El País</a>
    <br>
    <a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
    <br>
    <a href="http://es.openoffice.org/" title="Suite de programas de oficina">Open Office</a>
  </p>
  <p>
    <button id="cambiarAtributos">Cambiar atributos</button>
  </p>
  <script src="../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready(function () {
      $("#cambiarAtributos").click(function () {
        $("a").each(function() {
          let enlace = $(this);
          enlace.attr('title', 'Title modificado por jQuery');
          enlace.attr('href', 'https://www.desarrolloweb.com');
          enlace.css('color', 'orange');
        });
      });
    });
  </script>
</body>
</html>

Conclusión

Has aprendido a trabajar con el método attr() de jQuery, usado para cambiar los atributos de los elementos de la página. Pero ojo! solo es adecuado para los cambios en atributos. Ya hemos adelantado que para los cambios de las propiedades Javascript se hace de otra manera, como explicaremos en un artículo más adelante dedicado al método prop().

En el siguiente artículo veremos un ejemplo más elaborado sobre la modificación de atributos de elementos a través de la función attr(), en el que para obtener el valor del atributo a modificar utilizamos una función que pasamos también como parámetro a attr(). Además, para los interesados en aprender en vídeo puede accederse a las funciones de Attibutes en el Videotutorial de jQuery.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual
Selectores de Jerarquía en jQuery
Método attr() de jQuery, otros usos y removeAttr()
¿Alguna duda?
Pregunta y ayuda en la comunidad con tus respuestas en la sección de FAQ
Hacer una pregunta