jQuery attr() Method
Attributes are the name/value pairs that you assign to elements in their start tags. The most basic components we can manipulate using jQuery is through the attributes and properties of the HTML DOM elements . The attributes are available through its node properties. example
<img src="myphoto.jpg" alt="My Photo" width="25" height="25" />
jQuery allows us to get, set or remove any attribute within an element. To do these things, you use the following methods:
- attr() : to read, add, and change attributes
- removeAttr(): to remove attributes
jQuery attr()
The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements .Get Attribute
var src = $("img").attr("src");
alert(src);
<img src="myphoto.jpg" alt="My Photo" width="25" height="25" />
The above code is a simple example which fetches title src of img tag
Set Attribute
The attr(name, value) method can be used to set the named attribute onto all elements in the wrapped set using the pass value. This will set all elements with the named attribute using the value passed by the method.
$("img").attr("border", "4px solid black");
<img src="myphoto.jpg" alt="My Photo" width="25" height="25" />
The above code is a simple example which set border attribute to an image tag.
Browser View
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var src = $("img").attr("src");
alert(src);
$("img").attr("border", "4px solid black");
});
});
</script>
</head>
<body>
<img src="myphoto.jpg" alt="My Photo" width="25" height="25" />
<br>
<button>Click me</button>
</body>
</html>
The above code is first fetch the src attribute from img tag and set border attribute to the same img tag.
Setting multiple attributes
Setting multiple attributes is done the same was as setting a single attribute, but instead of passing a name and value as the two parameters to the attr() function, pass an associative array containing the attribute names and values and key-value pairs .
$("img").attr({
src: "change.png",
title: "Title Changed",
alt: "Attribute Changed",
});
<img src="myphoto.jpg" alt="My Photo" width="125" height="125" />
The above code is change the multiple attributes (img, title, alt) if img element.
Browser View
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr({
src: "change.png",
title: "Title Changed",
alt: "Attribute Changed",
});
});
});
</script>
</head>
<body>
<img src="myphoto.jpg" alt="My Photo" width="125" height="125" />
<br>
<button>Click me</button>
</body>
</html>
Remove attribute
The method removeAttr() removes the specified attributes from the selected element.
$("img").removeAttr("title");
<img src="myphoto.jpg" title="Remove attribute" width="25" height="25" />
The above code remove the title attribute using removeAttr() .
Related Topics