attr() method – How To Add Attribute in Jquery

Date Published: 24/03/2020Published By: JaiSchool

The attr() is a method of Jquery. It is used to set an attribute and value on the Html tag. This method will replace the attribute' value If the HTML element has the attribute from the same name, you are imposing by the Jquery attr() method otherwise It will add.

Table of Contents
attr() method syntax
Jquery's attr() method example
Add style attribute in Jquery
Add multiple attributes in Jquery

For example, if an element already has align attribute then attr() function will replace its value with the new value from the attr() method's second parameter.

And when an element has no attribute from the same name defined in attr(), then this method will set that attribute and value you set in attr()'s parameter.

Jquery's attr() method syntax

The name of the attribute and its value must be separated by a comma and both must be in separate double-quotes. See syntax below-

$(selector).attr("align","center");

Juqery's attr() method example

<!DOCTYPE html>
<html>
<head>
	<title>Add attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1 align="center">This is H1 tag</h1>
<button id="btn">Add attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("body").attr("bgcolor","red");
			});
		});
	</script>
</body>
</html>

Add "style" attribute (Inline CSS) in Jquery

<!DOCTYPE html>
<html>
<head>
	<title>Add STYLE attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1 id="heading">This is H1 tag</h1>
<button id="btn">Add attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("#heading").attr("style","color:red;font-size:50px;");
			});
		});
	</script>
</body>
</html>

Add multiple attributes in Jquery

To add multiple attributes in Jquery, you need to add Curly braces in attr() methods parenthesis like this:- $(selector).attr({});

Now, property and its value will be separated by a colon ( : ).

And two different attributes will be separated by a comma ( , ).

Syntax:-

$("#heading").attr({
        "align":"center",
        "style":"color:red;"
});

Add multiple attributes example-

<!DOCTYPE html>
<html>
<head>
	<title>Add STYLE attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1 id="heading">This is H1 tag</h1>
<button id="btn">Add attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("#heading").attr({"align":"center","style":"color:red;"});
			});
		});
	</script>
</body>
</html>

Similarly, you are free to add a class, an id, custom attributes and attributes whichever you want to add to your Html element.

If you want to add a blank (with no value) attribute then make its value empty like this $(selector).attr("align","");

Similar Content
[ Remove attribute in Jquery
[ Get attribute value in Jquery
[ Delete class and new in Jquery
[ Disable form from submitting
[ Replace the class value in Javascript