jQuery attr() Method

Last Updated:

jQuery attr() Method

The jQuery attr() method gets or sets attributes and values of the selected elements.

Note: The following points to be considered when using the jQuery attr() method

  • When this method is used to get attribute value, it gets the attribute value of the first matched element.
  • When this method is used to set attribute values, it will overwrite all matched elements.

In the following example, we will get the attribute value of the <input> tag.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery attr() Method</h1> <p>Click on the button get the attribute value of 'type'</p> <input type="text"> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ alert($("input").attr("type")); }); }); </script> </body> </html>

Syntax

// Get attribute value $(selector).attr(attribute); // Set attribute value $(selector).attr(attribute, value); // Set attribute value using a function $(selector).attr(attribute, func); // Set multiple attributes and values $(selector).attr({attribute:value, attribute:value});

Parameter Values

Value Explanation
attribute Specifies the name of the attribute
value Specifies the value of the attribute
func Specifies a function that returns the attribute value to set
attribute:value, attribute:value Specifies multiple attributes and values

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
attr()YesYesYesYesYesYesYesYesYesYesYesYesYes

Set Attribute Value

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery attr() Method</h1> <p>Click on the button to set placeholder</p> <input type="text"> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("input").attr("placeholder","Type something"); }); }); </script> </body> </html>

Set Attribute Value using Function

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery attr() Method</h1> <p>Click on the button to set placeholder</p> <input type="text"> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("input").attr("placeholder",function(){ return "Type something"; }); }); }); </script> </body> </html>

Set Multiple Attributes Values

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery attr() Method</h1> <p>Click on the button to set multiple attribute.</p> <input type="text"> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("input").attr({ "placeholder": "type something", "size": "15" }); }); }); </script> </body> </html>

Share this Page

Meet the Author