El método attr() en jQuery se usa para establecer o devolver los atributos y valores de los elementos seleccionados.
Sintaxis:
- Para devolver el valor de un atributo:
$(selector).attr(attribute)
- Para establecer el atributo y el valor:
$(selector).attr(attribute, value)
- Para establecer el atributo y el valor usando una función:
$(selector).attr(attribute, function(index, currentvalue))
- Para establecer varios atributos y valores:
$(selector).attr({attribute:value, attribute:value, ...})
Parámetro
- atributo: este parámetro se utiliza para especificar el nombre del atributo
- valor: Se utiliza para especificar el valor del atributo
- función (índice, valor actual): se utiliza para especificar una función que devuelve el valor del atributo para establecer
- índice: Posición de índice del elemento recibido con la ayuda de este parámetro.
- currentvalue: Se utiliza para recibir el valor del atributo actual de los elementos seleccionados.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>jQuery attr() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;">
</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132-120x300.png"
alt=""
width="120"
height="300"
class="alignnone size-medium wp-image-915678" />
<br>
<br>
<button>Click</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", "300");
});
});
</script>
</center>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>jQuery attr() Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;"></h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132-120x300.png"
alt=""
width="120"
height="300"
class=
"alignnone size-medium wp-image-915678" />
<br>
<br>
<button>Click</button>
<script>
$(document).ready(function() {
$("button").click(function() {
alert("Image width: " +
$("img").attr("width"));
});
});
</script>
</center>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-3:
<!DOCTYPE html>
<html>
<head>
<title>jQuery attr() Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;">
</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132.png"
alt=""
width="120"
height="300"
class=
"alignnone size-medium wp-image-915678" />
<br>
<br>
<button>Click</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", function(n, v) {
return v - 50;
});
});
});
</script>
</center>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-4:
<!DOCTYPE html>
<html>
<head>
<title>jQuery attr() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style=
"color:green;">
GeeksForGeeks</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;"></h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132.png"
alt=""
width="120"
height="300"
class=
"alignnone size-medium wp-image-915678" />
<br>
<br>
<button>Click</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr({
width: "150",
height: "100"
});
});
});
</script>
</center>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA