Estás aquí
Noticias 

Acceder y modificar atributos HTML desde jQuery

BlogUneWeb
En jQuery existe una función llamada attr() que sirve para recuperar y alterar atributos de los elementos de la página.
En este Manual de jQuery estamos recorriendo poco a poco la documentación del popular framework Javascript, para ofrecer a los lectores de DesarrolloWeb.com explicaciones detalladas de las clases y métodos disponibles. Le ha llegado el turno al método attr() que sirve para trabajar con los atributos de los elementos de la página. Este método, como muchos otros 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, value, etc.
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, modificarlos o eliminarlos. Veremos los distintos usos conforme los parámetros que le pasemos.
Pero 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() es para recuperar el valor de un atributo. En este caso, el método debe recibir una cadena con el nombre del atributo que queremos recuperar.
Ahora podríamos acceder a lo que hay escrito en el campo de texto de la siguiente manera:
$(“#campotexto”).attr(“value”)
Pero atención, en el caso que invoquemos el método attr sobre un objeto jQuery que contenga varios elementos a la vez, attr() en este caso 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 http://www.desarrolloweb.com/articulos/core-each-jquery.html.
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:
<html>
<head>
   <title>método attr</title>
   <script src=”../jquery-1.3.2.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function(){
   
   $(“a”).each(function(i){
      var titulo = $(this).attr(“title”);
      alert(“Atributo title del enlace ” + i + “: ” + titulo);
   });
   
});
</script>
</head>

<body>
<a id=”enlace1″ 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>
</body>
</html>

Modificar un atributo

Ahora vamos a ver un uso de attr() en el que no leemos el atributo, sino que lo modificamos. En este caso la función recibe dos cadenas de texto, la primera con el nombre del atributo y la segunda con el nuevo valor que queremos asignar. Por ejemplo:
$(‘li’).attr(“type”, “square”);
Esto haría que todos los elementos de lista tengan un bullet de tipo cuadrado.

Modificar varios valores de atributos a la vez

También podemos utilizar el método attr() pasando un objeto con pares atributo/valor. Esto sirve para modificar de una sola vez varios atributos sobre los elementos que haya en un objeto jQuery y si esos atributos no existían, simplemente los crea con los valores enviados en el objeto.
A estas alturas ya debemos saber crear variables con notación objeto, pero voy a dejar un ejemplo para que se pueda ver perfectamente este uso del método.
Imaginar que tenemos varios enlaces en la página, y que queremos modificar sus atributos, para todos los enlaces a la vez.
$(‘a’).attr({

   ‘title’: ‘Title modificado por jQuery’,
   ‘href’: ‘http://www.desarrolloweb.com’,
   ‘style’: ‘color: #f80’
});

A partir de la ejecución de la sentencia 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.
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.
Fuente:enlace

Entradas relacionadas