Reading and Modifying Attributes
In this page:
Reading Attributes
The attr() method reads the current value of an HTML attribute such as href, src, or title directly from the markup. It always returns the original value set in the HTML, or the last value you explicitly assigned with attr() -- not any state changes the browser tracks internally.
Example: Reading Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<a id="link" href="https://example.com">Link</a>
<script>
console.log($("#link").attr("href"));
</script>
</body>
</html>Setting Attributes
Pass a name and a value to attr() to change an attribute, such as updating an image's src or a link's href. jQuery updates the markup immediately, and calling it on a jQuery collection updates every matched element in one call.
Example: Setting Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img id="pic" src="old.jpg">
<script>
$("#pic").attr("src", "new.jpg");
</script>
</body>
</html>Multiple Attributes
You can pass a plain object of name/value pairs to attr() to set several attributes in a single call. This is handy when you need to configure an element -- like an img's src, alt, and title -- all at once instead of chaining three separate calls.
Example: Multiple Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img id="pic">
<script>
$("#pic").attr({src: "photo.jpg", alt: "A photo", title: "My Photo"});
</script>
</body>
</html>Removing Attributes
removeAttr() removes an attribute from an element entirely, rather than setting it to an empty string. Removing an attribute like disabled or required actually changes the element's behavior, not just its markup.
Example: Removing Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field" disabled>
<script>
$("#field").removeAttr("disabled");
</script>
</body>
</html>Attribute vs Property
Use attr() for HTML attributes such as href, src, and title -- values written directly in the markup. For properties that reflect live DOM state, like whether a checkbox is currently checked, use prop() instead, since the two can diverge after user interaction.
Example: Attribute vs Property
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="check" type="checkbox" checked>
<script>
console.log("attr:", $("#check").attr("checked"), "prop:", $("#check").prop("checked"));
</script>
</body>
</html>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: