15

Viendo que en este código el uso de attr y prop hacen lo mismo, quisiera saber ¿cuál es la diferencia entre ambos? y en qué escenarios se recomienda usar uno u otro sin caer en opiniones, sino basándose en recomendaciones hechas por motivos demostrables o documentados.

$(function() 
{

  $('#attrId').click(function(e) 
  {
    console.log($(this).attr('id'));
  });

  $('#propId').click(function(e) 
  {
    console.log($(this).prop('id'));
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="attrId">attr</a>
<hr />
<a href="#" id="propId">prop</a>

1

2 respuestas 2

36
+50

Para entender la diferencia principal entre .attr() y .prop() hay que explicar la diferencia entre un atributo y una propiedad en HTML porque, como su propio nombre indica, .attr() va a servir para trabajar con atributos, mientras que .prop() trabaja con propiedades.

Cuando creas un elemento HTML, puedes darle atributos, por ejemplo este input tiene los atributos id, name, type y value:

<input id="radio1" name="miRadio" type="radio" value="1" />

Pero entonces el navegador, cuando procesa el código HTML, crea un nodo en el DOM que se corresponde con ese elemento HTML y, como ese nodo es un objeto, tendrá propiedades. Y ese objeto no sólo va a contener los atributos del elemento HTML, sino que va a tener propiedades suyas como nodeName, selectedIndex, defaultValue...

En versiones anteriores de jQuery, .attr() devolvía atributos y propiedades indistintamente. Y fue a partir de la versión 1.6 (cuando se añadió .prop()) que se separó y se hizo esa diferenciación entre .attr() para atributos y .prop() para propiedades (no sin cierta polémica, lo que obligó a deshacer algunos de los cambios como explica John Resig, el creador de jQuery, en su blog).

Generalmente, en la mayoría de los casos que se usa .attr() se podría cambiar por un .prop() y seguiría funcionando (porque los atributos acaban convertidos en propiedades) pero no al revés (porque hay propiedades que no tienen un atributo correspondiente).

De hecho, para evitar problemas, en algunos casos .attr() hace una llamada a .prop() para obtener los valores que no se encuentren como atributos pero puedan existir/mutar como propiedades; haciendo que .attr() sea un poco más lenta. En ese caso, aunque .attr() funcione, lo conceptualmente correcto, sería usar .prop().


Aquí dejo un ejemplo de cómo .attr() y .prop() difieren en valor: dos radio buttons en los que uno está chequeado, si pulsas el botón podrás ver que mientras el atributo es "checked" (según especificación HTML), la propiedad ha transformado ese valor a un booleano con valor true. Ahora marca el otro radio button y vuelve a pulsar el botón: ¡la propiedad ha cambiado a false pero el atributo sigue diciendo "checked"!

$("#boton").on("click", function() {
  console.log("Atributo checked = " + $("#radio2").attr("checked"));
  console.log("Propiedad checked = " + $("#radio2").prop("checked"));
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<input id="radio1" name="miRadio" type="radio" value="1" />
<input id="radio2" name="miRadio" type="radio" value="2" checked="checked" />

<button id="boton">Comprobar</button>


Fuentes y bibliografía (en inglés):

  1. Blog de John Resig con las diferencias y justificación para .attr() y .prop()
  2. Documentación de jQuery para .attr()
  3. Documentación de Jquery para .prop()
  4. Stack Overflow: prop vs attr
  5. Stack Overflow: diferencias entre prop y attr y cuándo usarlos
1
  • 2
    Una excelente respuesta, como siempre Alvaro. Commented el 14 feb. 2018 a las 15:42
10

Para versiones actuales de jQuery:

attr se refiere a el valor del atributo del código HTML mientras que que prop se refiere al valor actual de la propiedad (que fue seteado inicialmente con el valor del atributo)

Un ejemplo práctico:

Nota: Presiona los botones uno por uno en orden.

$(function() {
  var checkbox = $("#checkbox");
  
  alert("Inicialmente comienza activado");
  alert("attr: " + checkbox.attr("checked") + ", prop: " + checkbox.prop("checked"));
  
  $("#button1").click(function() {  
    alert("Desactivamos con prop");
    checkbox.prop("checked", false);
    alert("attr: " + checkbox.attr("checked") + ", prop: " + checkbox.prop("checked"));
  });
  
  $("#button2").click(function() {  
    alert("Reactivamos con prop");
    checkbox.prop("checked", true);
    alert("attr: " + checkbox.attr("checked") + ", prop: " + checkbox.prop("checked"));
  });
  
  $("#button3").click(function() {  
    alert("Desactivamos con attr");
    checkbox.attr("checked", null);
    alert("attr: " + checkbox.attr("checked") + ", prop: " + checkbox.prop("checked"));
  });
  
  $("#button4").click(function() {  
    alert("Reactivamos con attr");
    checkbox.attr("checked", "checked");
    alert("attr: " + checkbox.attr("checked") + ", prop: " + checkbox.prop("checked"));
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" checked="checked" /><span>Comienza activado<span><br />
<button id="button1">Desactivar con prop</button><br />
<button id="button2">Reactivar con prop</button><br />
<button id="button3">Desactivar con attr</button><br />
<button id="button4">"Reactivar" con attr</button><br />

Como se puede observar utilizando prop se activa y desactiva el checbox, la propiedad checked cambia de estado a false y luego a true y el atributo checked mantiene su valor de checked que es el que tiene el DOM al comienzo.

Sin embargo al utilizar attr el setear el atributo en null retira y atributo de checked y por consiguiente además cambia el estado (propiedad checked) a false (desactivado). Mientras que al deveolverle su valor original de checked el elemento recupera su atributo sin embargo esta acción no modifica el estado del checkbox, que mantendrá su propiedad en false.

En general utiliza siempre prop si tratas de manipular el estado actual del elemento y attr solo para obtener el estado inicial del elemento (no te recomiendo que lo utilices para manipular el atributo una vez que este elemento haya sido attachado al DOM si el elemento es dinámico o nunca si es estático)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.