Quick Reach
- 1 What is jQuery attr method?
- 2 How to use the jQuery attr method?
- 3 jQuery set attr example to change image width attribute
- 4 jQuery set attribute example for image height and width
- 5 jQuery set attr example with table attributes
- 6 A set attr example with div element
- 7 An example of getting attribute value
- 8 Related
What is jQuery attr method?
Sometimes you need to change the attributes of elements in your web page upon user actions or some other reason. For example, changing the image dimensions, height, and width in the web page. Similarly, changing the paragraph, div properties, table borders, background color attributes etc. without reloading the web page.
A set attr example
Similarly, it may also be required to get elements attributes, like current image height or width, table width etc. on the basis of which you can perform some action, all without reloading the web page.
An example of Get attr
This is where jQuery attr works. The attr method is used to set or get/return element attributes in the document.
This tutorial will show you examples of setting different elements attributes on the fly but let us first look at the syntax of attr method.
How to use the jQuery attr method?
The syntax of attr to Set the value is:
$(“element”).attr(“property”,”value”);
The syntax to get attribute value is:
$(“element”).attr(“property”);
Where an element can be an image, a div, paragraph, table etc.
Note that, if you use attr jQuery method to set the attribute(s) of the element, it will change attributes to all matched elements. Whereas in the case of using it to return attribute value, it will return only the first matched element value.
jQuery set attr example to change image width attribute
The example below shows how to set the width of an image as you click on “change dimension” button by using attr in jQuery.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#chgdim").click(function(){
$("#tc").attr("width","300");
});
});
</script>
</head>
<body>
<img id="tc" src="TC_logo.png">
<hr/>
<button id="chgdim">change dimension</button>
</body>
</html>
|
jQuery set attribute example for image height and width
You can also set multiple attributes at one call with attr method. The example below shows how to set the width and height of an image as you click on the “change dimensions” button by using attr method.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#chgdim").click(function(){
$("#tc").attr({width:"300",height:"150"});
});
});
</script>
</head>
<body>
<img id="tc" src="TC_logo.png">
<hr/>
<button id="chgdim">change dimension</button>
</body>
</html>
|
As you can see, you have to enclose multiple attributes in curly brackets and each property is followed by a colon while multiple properties are separated by commas.
jQuery set attr example with table attributes
The example below sets the table border as you click on “set table border” button by using $.attr method.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#chgdim").click(function(){
$("table").attr("border","1");
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Setting table border</td>
</tr>
</table>
<hr/>
<button id="chgdim">set table border</button>
</body>
</html>
|
A set attr example with div element
You can also set div element attributes by using attr method. The example below sets the text alignment of a div element to center as you click on the button.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#chgdim").click(function(){
$("div").attr("align","center");
});
});
</script>
</head>
<body>
<div>Align div text by attr</div>
<hr/>
<button id="chgdim">Div alignment</button>
</body>
</html>
|
An example of getting attribute value
As mentioned in above section, you can use jQuery attr to get element attribute value as well. The example below returns the image height and width as you click on the button.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#chgdim").click(function(){
alert("The image Width=" + $("#tc").attr("width") + " And image Height=" + $("#tc").attr("height"));
});
});
</script>
</head>
<body>
<img id="tc" width="263" height="60" src="TC_logo.png">
<hr/>
<button id="chgdim">get image height and width</button>
</body>
</html>
|
Also see jQuery CSS method | jQuery remove attribute | jQuery add attribute | jQuery HTML method
Leave A Comment?