Acceder y modificar atributos HTML desde jQuery

  • Por
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>

Podemos ver el ejemplo en marcha en una página aparte.

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.

Si lo deseas, puedes ver el ejemplo en marcha en una página aparte.

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.

Podemos ver una página aparte con este ejemplo en marcha.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Xester

23/12/2009
Función (método) attr
Pero no íbamos a explicar la función attr de JQuery???
Has hablado de todo menos del método attr.

midesweb

29/12/2009
Hablar del método attr()
Hola!
Gracias por el aviso... por algún despiste se nos coló el texto de otro artículo en vez del que hablaba del método attr(). Ya está reparado!

paco_pepe-425371

03/6/2010
Una duda
como puedo insertar un onblur?? me deja insertar texto de todo tipo y modificar el id , estilos etc etc pero en el momento que pongo onblur o un onkeyup y una funcion ya pasa de mi.

paco_pepe-425371

03/6/2010
Me respondo a mi mismo
la sintaxis seria asi:
.attr("onKeyUp","funcion(contenido del onkeyup);");

en el caso de onblur seria onBlur y supongo que para onchange seria onChange.

ahora tengo otra duda resulta que en la función que paso tengo que meter una variable:
"onKeyUp":"calculo(this.value,precio+newID.value,subtotal+newID,total);" ¿¿ como seria la sintaxis ?? lo intente con "funcion(this.value,precio"+newID".value,subtotal"+newID",total);"
pero me da error de sintaxis

midesweb

26/9/2010
Trabajo con eventos utilizando attr() no creo que sea lo más útil
Hola paco_pe...
Tienes que mirar los capítulos donde se tratan los eventos en jquery, que hay muchas funciones que te pueden ayudarte a gestionarlos como necesites.

En realidad, aunque attr, modificando un atributo como onclick puedas definir o cambiar un evento, no está pensado para ello.

frandotouro

15/8/2011
Una pregunta
¿No pueden explicar como agregar terminaciones a enlaces?

Necesito saber como usar esta funcion para un enlace que lleve href="/a" cambie a /ala teniendo que escribir solo el "la"

Reynaldo Mallea

09/10/2013
Problema en el código JQuery
Saludos y gracias de antemano, siempre es necesario una web que te pueda dar soluciones a casos en específico, como es lo que me pasa ahora.

Tengo creado campos de texto, con su "id" respectivo - nombre - apellido - pero cuando pongo esta linea de código:

var nombre = $('#nombre').attr('value');
var apellido = $('#apellido').attr('value');

y veo el resultado, me sale "undifined undifined"
mi linea de impresión por pantalla: $('<h1>' +nombre +' '+apellido +'<br/> Gracias por enviar tu comentario. </h1>')

no se que más hacer, me esta volviendo loco...xD
Gracias y estaré por su comunidad seguido al parecer :)

Reynor

edel

25/1/2014
duda sobre jquery
Hola a todos.
Desde hace algunas semanas busco la forma de cambiar las propiedades de un botón, en dependencia de si existen unos valores determinados en una base de datos. Estoy enviando un formulario con jquery y ajax a una bd sql y quiero ademas que un botón cambie a activado si están unos balores en la tabla y si no que aparesca diferente.
En mi página http://www.tubeonline.net entrando a una de las series, podrán ver lo que deseo hacer, marcar los capítulos vistos.
Espero puedan responderme rápidamente y ayudarme con el problemita. Se que es sencillo, pero yo de java no conozco mucho.
Saludos

Armando Gomez

30/6/2014
No puedo obtener los atributos indicados con reglas CSS
Que tal.
Les mando primeramente un saludo y una felicitación por el buen trabajo que realizan.
Mi pregunta es la siguiente. Estoy estudiando como acceder los atributos de los elementos HTML con las funciones API del DOM con JavaScript y tambien con jQuery.
Me he encontrado con el problema de que cuando los atributos son indicados desde el elemento con la propiedad "style" no tengo problemas para acceder a ellos; pero si los atributos son indicados a través de reglas CSS; no me es posible obtener la información.
Que cosa especial hay que hacer para poder acceder a los atributos indicados desde CSS?
Hay funciones especiales para ello?
Gracias de Antemano.

Jesus

04/7/2014
Información
Hola buenas tardes, tengo una duda.

quiero hacer lo siguiente: tengo un span el cual tiene un código como texto, entonces con jquery. quisiera al momento de darle clic al código ese que el texto(codigo) se seleccione, hay manera de hacer eso?.. o solo se puede para los inputs en formularios?.. gracias por su atención.

Diego

23/12/2016
Excelente contenido
He seguido y estudiado este manual y me parece excelente.