The jQuery attr() method is used to return or set the attributes and values of the selected elements. When you have to get the value of the attributes of an element, you can use this method. You can also use this method when you have to set the attribute with its value.
Let’s set and get the attributes and values of the elements with the examples given below.
jQuery attr() Method to Return Attribute Value
The jQuery attr() method can be used to return the value of the elements. First, select the elements and then after get any attribute value.
See the syntax of the method to return the attributes and values.
Syntax
The below example contains the paragraph with the style attribute. You can return the value of style attribute using the example given below.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ var mystyle = $( ".mypara" ).attr("style"); alert(mystyle); }); }); </script> <button type="button" class="mybtn">Click to Return attribute</button> <p class="mypara" style="color:red;">This is my paragraph.</p> |
Output
This is my paragraph.
Click the button given above to get the value of the style attribute. The method returns the value of the attribute and displays it in the alert box.
Set Attribute and Value Using jQuery attr() Method
When you want to set the attributes and values, you have to use this method. The syntax of the method is given below. It adds a single attribute with its value.
Syntax
Let’s set the style attribute with its single value in the example below. This adds a single attribute with its relevant value.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.mybtnset').click(function(){ $( ".myparaset" ).attr("style","background:yellow"); }); }); </script> <button type="button" class="mybtnset">Click to Set attribute</button> <p class="myparaset">This is my paragraph.</p> |
Output
This is my paragraph.
When you click the button given above, it applies a background yellow color to the paragraph.
How to Set Multiple Attributes and Their Values
If you want to set multiple attributes and values, you can also use jQuery attr() method. You can set as many attributes as you want with its values.
Use the syntax given below to set the multiple attributes and values
Syntax
Its useful to set multiple attributes and value at one go. You have to use the example given below.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.mybtnsetmultiple').click(function(){ $( ".myinputsetmultiple" ).attr({style:"background:yellow", placeholder:"Enter your name"}); }); }); </script> <button type="button" class="mybtnsetmultiple">Click to Set Multiple attributes</button><br><br> <input type="text" class="myinputsetmultiple" name="name"> |
Output
The above example contains the button and the input box. Suppose that you have to add a placeholder and background color. For this, you have to add placeholder and style attributes with its values.
You have to click the above button to add multiple attributes to the input box. After you click the button, a placeholder and background yellow color get added to the input box.
I hope you like this tutorial on jQuery attr() method. If you have any queries regarding the tutorial, please comment below.
References