The jQuery Attr method – .attr(), gets or sets the value of HTML attributes of elements. The HTML attributes can be width, height, title, value, src, href, etc.
Get the value – It can get a single value of an element at a time.
Set the value – It can set multiple values of multiple elements at a time.
Syntax of .attr() method
a. Returning an HTML attribute value of an element
1
| $(element).attr(attribute) |
b. Setting one single attribute value of one or more elements.
1
| $(selector).attr(attribute,value) |
c. Using function to set one single attribute value of one or more elements
1
| $(selector).attr(attribute,function(index,currentvalue)) |
d. Set multiple attributes values of one or more elements
1
| $(selector).attr({attribute:value, attribute:value,...}) |
| Parameter | Description |
|---|---|
| attribute | name of the attribute. Examples ‘width’, ‘height’, ‘src’, ‘href’, ‘value’, etc |
| value | value of the attribute |
| function(index,currentvalue) | function that returns the attribute value to set them
|
Example 1: Get Width of an Image
The page has one image with a button.
1
2
| <img src="animal.jpg" width="500" height="400" /><button id="button1">Show Width</button> |
To get the width of the image I can use .attr() method like this:
1
2
3
| $("#button1").click(function (e) { alert("Width is: " + $("img").attr("width"));}); |
The alert message box will show Width is: 500.
Example 2: Set Width of 2 Images
Here I have 2 images and a button.
1
2
3
| <img src="cat1.jpg" width="400" height="300" /><img src="cat2.jpg" width="550" height="350" /><button id="button2">Set Width</button> |
On the button click event I can set the width of these 2 images to 200 px by using jQuery Attr method.
1
2
3
| $("#button2").click(function (e) { $("img").attr("width", "200")}); |
So on the button click event the width of these 2 images are set to 200 px.
Example 3: Set Height of 2 Images using function
The page has 2 images and a button.
1
2
3
| <img src="cat1.jpg" width="400" height="300" /><img src="cat2.jpg" width="550" height="350" /><button id="button3">Set Height</button> |
This time I have used the function parameter of the jQuery attr method.
The function parameter will loop through each element of the selector (which are the 2 images here).
In this function parameter I am returning the height as 150 and this sets the height of both the images to 150 px.
1
2
3
4
5
| $("#button3").click(function (e) { $("img").attr("height", function (index, currentvalue) { return 150; });}); |
Example 4: Decrease Height of Images by 50px (on every button click), using function
The page has 2 images and a button.
1
2
3
| <img src="cat1.jpg" width="400" height="300" /><img src="cat2.jpg" width="550" height="350" /><button id="button4">Decrease Height</button> |
Here I will to decrease the height of these 2 images by 50 pixels, every time the button is clicked.
I will use the second parameter (currentvalue) of the function. This will give the height of the element. Then I am subtracting 50 from it and returning the new height value for the element.
In this way I am decreasing the height by 50 pixels of these 2 images on every button click.
1
2
3
| $("img").attr("height", function (index, currentvalue) { return currentvalue - 50;}); |
Example 4: Set multiple attributes using jQuery Attr Method
I have 2 images and a button. On the button click event I will set multiple attributes of these 2 images. These attributes are width, height and src.
1
2
3
| <img src="cat1.jpg" width="400" height="300" /><img src="cat2.jpg" width="550" height="350" /><button id="button5">Set Height, Width & Src</button> |
In the jQuery Attr Method I am passing multiple attributes values in comma separated manner.
1
| .attr({"attr1": "value1","attr2": "value2","attr3": "value3",....}) |
So the below .attr() code becomes.
1
2
3
| $("#button5").click(function (e) { $("#div5 img").attr({ "width": "600", "height": "500", "src": "dog1.jpg" });}); |
This will set 3 attributes of the 2 images.
