En este artículo, aprenderemos cómo recuperar los atributos de una etiqueta HTML usando jQuery. Podemos usar JQuery para hacer esto en unas pocas líneas de código. Aquí vamos a construir un sistema de zoom de imágenes donde veremos cómo se puede recuperar y cambiar un atributo de la etiqueta HTML.
Uso del método attr(): este método se puede usar para establecer el atributo o para devolver el atributo que depende completamente de los argumentos pasados dentro de esta función.
Sintaxis:
// Retrieve the value of the attribute
// of the first matched element
$(selector).attr(attribute)
// Set the value of matched element's attribute
$(selector).attr(attribute, value)
// Set multiple attributes and values
$(selector).attr({attribute1: value1, attribute2: value2,...})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1></h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="This is GFG Post"
width="250" height="250"><br>
<button>Zoom</button>
</body>
<script>
$(document).ready(function () {
$("button").click(function () {
// Setting width and image attribute
$("img").attr(
{ "width": 500, "height": 500 }
);
// Retrieving alt attribute value from the image tag
const heading = $("img").attr("alt");
$("h1").text(heading);
});
});
</script>
</html>
Producción:
Como puede ver en la salida, al hacer clic en el botón de zoom, los atributos de ancho y alto de la etiqueta de la imagen cambiaron. Además, recuperamos el valor del atributo alt de la etiqueta de la imagen y lo configuramos dentro de la etiqueta h1.
La tarea anterior también se puede realizar reemplazando el método attr() con el método prop que no realiza ningún cambio en la salida. Ahora surge la pregunta ¿cuál usar?
Diferencia entre attr() y prop(): el método attr() cambia los atributos de esa etiqueta HTML, mientras que prop() cambia la propiedad de la etiqueta HTML según el árbol DOM. Entendamos esto con un ejemplo.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<input type="text" name="test"
id="test" value="Test">
<button>Test</button>
</body>
<script>
$(document).ready(function () {
$("button").click(function () {
console.log(
"When using attr() method: " +
$("#test").attr("value")
);
console.log(
"When using prop() method: " +
$("#test").prop("value")
);
})
})
</script>
</html>
Producción:
El resultado anterior muestra que si desea el valor predeterminado para cualquier etiqueta HTML, utilice la función attr() . Si desea que el usuario cambie el valor del atributo (como entradas, casillas de verificación, radios, etc.), use la función prop() para obtener el valor actualizado.
Publicación traducida automáticamente
Artículo escrito por himanshusharma11199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA