Atributos JQuery

Añadir atributos con jQuery

Añadir atributo a elemento con jQuery

En este tutorial aprenderemos cómo añadir atributos a elementos html dinámicamente y obtener su valor con jQuery.

Método .prop(«nombre»,»valor»)

Veamos un ejemplo

<!-- Elemento html -->
<div id="cabecera"></div>
 <script>
  //Seleccionamos el elemento con id=cabecera y le añadimos el atributo title
  $("#cabecera").prop("title","Cabecera de la página");
  //El elemento ahora quedará asi: <div id="cabecera" title="Cabecera de la página"></div>
  //Si enviamos un solo parámetro con el método prop nos devolverá el valor del atributo
  var titulo = $("#cabecera").prop("title");
  //Ahora el valor de titulo es: "Cabecera de la página".
</script>

Método .attr(«nombre»,»valor»)

El funcionamiento del método attr() es similar a prop().

<!-- Elemento html -->
<div id="cabecera"></div>
 <script>
  //Seleccionamos el elemento con id=cabecera y le añadimos el atributo title
  $("#cabecera").attr("title","Cabecera de la página");
  //El elemento ahora quedará asi: <div id="cabecera" title="Cabecera de la página"></div>
</script>

¿Cuándo usar prop o attr?

El método prop() existe en JQuery desde la versión 1.6. Antes sólo podíamos utilizar attr(). El método attr() sirve para acceder a los atributos html de un elemento y el método prop() accede a las propiedades. En las últimas versiones de JQuery ya se está deshabilitando las funcionalidades del método attr porque no funciona bien en todos los casos, así que te recomiendo usar prop.

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas