Método prop() de jQuery y diferencias con attr()

  • Por
El método prop() disponible desde jQuery 1.6 sirve para acceder y modificar propiedades de elementos y attr() para atributos. Veamos las diferencias.
Antes de jQuery 1.6 teníamos un único método para el acceso y modificación de todos los atributos de los elementos de la página por medio de jQuery, llamado attr(). A partir de jQuery 1.6 tenemos dos métodos que vamos a tratar de distinguir en este artículo. Por un lado tenemos prop() y por otro lado tenemos attr().

El método attr() sirve para acceder a atributos de la página y ya lo explicamos en un par de artículos del Manual de jQuery. En el texto Acceder y modificar atributos HTML desde jQuery repasamos los usos generales de este método y en el artículo Método attr() de jQuery, otros usos y removeAttr() vimos otros usos y el método "hermano" removeAttr().

Nota:

Nota: Además, tenemos el método val() que sirve específicamente para acceder y modificar el atributo value. En principio ese método val() es el que deberíamos usar siempre que queremos ver el valor que haya cargado en "value", o modificarlo.

Ahora en el API de jQuery tenemos un nuevo integrante del ecosistéma de métodos para trabajo con los atributos de la página, llamado prop(), que sirve para acceder y modificar propiedades.
 

Qué son atributos y qué son propiedades

En la documentación de jQuery tienes una explicación sobre todo esto, aunque a veces puede resultar algo confusa, porque habitualmente utilizamos el término ?attribute? y ?property? (atributo y propiedad) para la misma idea, es decir, atributos de las etiquetas HTML. Al menos en los manuales de DesarrolloWeb .com utilizamos esos dos términos indistintamente como sinónimos cuando nos referimos al HTML e incluso muchas veces al hablar de programación.

Pues bien, para clarificar esto, tengamos en cuenta a qué nos estamos refiriendo en este caso como atributo y a qué nos referimos con propiedad:

Atributo: cualquier cosa que tengamos en una etiqueta HTML para personalizarla.

<a style="color: red">...</a>

En ese caso "style" es un atributo de la etiqueta HTML.

Propiedad: cualquier cosa a la que podamos acceder desde una propiedad de un objeto nativo Javascript.

document.forms[0].elements[0].checked

En el ejemplo, tenemos varias propiedades en funcionamiento, pero veamos el "checked" final, que es una propiedad de un elemento de formulario. A esa propiedad accedemos desde el DOM de Javascript.

Por lo tanto, para concretar todavía más y ver lo confuso que puede llegar a ser, esa propiedad nativa Javascript "checked" sería diferente de este atributo "checked":

<input type="checkbox" checked="checked">

En ese caso "checked" es el atributo de HTML.
 

Uso del método prop() en jQuery

El método prop() sirve para modificar propiedades nativas de Javascript de los elementos de una página. Como otros métodos de jQuery el uso es ligeramente distinto dependiendo del juego de parámetros que le enviemos.

En principio, enviando un único parámetro nos sirve para acceder al valor de una propiedad, aquella que indiquemos en el parámetro. La otra opción nos sirve para modificar una propiedad y para ello debemos indicar dos parámetros, el primero sería la propiedad a modificar y el segundo el valor que queremos introducir.

$(elemento).prop("checked");

Esto nos devolvería el valor de la propiedad Javascript "checked", que seguramente sepamos, es un booleano que indica con true o false si un campo checkbox está o no marcado.

Si quisiéramos modificar el estado del checkbox, hacemos lo siguiente:

$(elemento).prop("checked", true);

Esto haría que el checkbox estuviera marcado como confirmado.
 

Cuándo utilizar prop() y cuándo usar attr()

Antes de jQuery 1.6 solo existía attr(), por lo que no existía una duda concreta sobre cuándo usar uno o el otro. El problema es que attr() tenía algunos problemas/bugs y se hacía difícil su mantenimiento. Especialmente daban problemas con attr() muchas de las propiedades de objetos Javascript que eran boleanas, como el mencionado checked u otros como disabled o readonly.

En la actualidad tenemos que usar los métodos con cuidado porque pueden producirse casos confusos. ¿Qué hacemos campoCheck.attr("checked") o mejor campoCheck.prop("checked")?

Para evitar esos casos, attr() solo te dará el valor de atributos HTML y prop() te dará el valor de las propiedades del DOM de Javascript para un elemento dado. En versiones más nuevas de jQuery todas las propiedades boleanas de los objetos del DOM se tienen que acceder por prop() y se han desactivado en attr(). Por ejemplo campoCheck.attr("checked") se ha desactivado para que no te devuelva ningún valor y siempre deberías acceder por campoCheck.prop("checked").

Para ver algunos ejemplos.

  • Atributos que se modifican con attr(): class, id, href, label, src, title...
  • Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly...
Espero que esto resuelva la duda que muchos de nosotros hemos tenido cuando intentamos acceder a propiedades y valores de atributos.

Autor

Miguel Angel Álvarez

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

Javier

29/8/2012
Muy util este articulo
Gracias Miguel! Con esto me ahorraste mas de un quebradero de cabeza.

tau

30/8/2012
Buen dato!
Gracias por el dato, a mi me ha causado problemas minimos attr.
No te entendi hasta la parte en que dice "Para evitar esos casos, attr() solo te dará...", espero recordarlo en cuanto sea necesario.

Personalmente me suena a que ellos tuvieron dificultades con attr() y por eso hicieron prop(). Creo que por parte del usuario seria mucho mejor si todo lo accedieras con una sola funcion ya que precisamente el objetivo de JQuery es ahorrarte problemas con codigos largos y memorizacion de funciones...

Joseba

31/8/2012
resumiendo
No sé si me he enterado bien. ¿Propiedad es todo lo que es booleano y atributo todo lo demás?

Javier

31/8/2012
Propiedad o Atributo
Yo entiendo que attr() se usa para atributos HTML. Los atributos html son los que se declaran dentro de las etiquetas.
Y prop() es para acceder a las propiedades de un objeto javascript.

Como javascript trabaja con el DOM de la página a veces esta ligado a una etiqueta.
Pero no siempre, un objeto instanciado de new Date() no esta representando nada en la página.

Y es por eso que hay que diferenciar los atributos de una etiqueta HTML, y propiedades propias de un objeto (así sea una instancia de jQuery).

Esto esta bien:
$('header').prop('clientHeight');

Esto no, por que ese atributo no existe en el estandar HTML:
$('header').attr('clientHeight');

Hay caso compartidos, devolverán lo mismo:
$('header').attr('class');
o
$('header').prop('className');

Pablo Turchinsky

03/9/2012
prop() y attr()
excelenbte la explicacion. Muchas gracias. ase entiende perfectamente.

William

16/6/2014
Excelente
Muy bien gracias por el aporte eh estado peleando un poco con estos checks, pero con tu ayuda lo eh logrado gracias.

alpargata

10/12/2014
gracias
Muchas gracias por el aporte, es justo el problema que estaba teniendo, el marcar o desmarcar todas lsa checks de mi página web.