Get and Set attribute value using jQuery attr method
source link: https://www.laravelcode.com/post/get-and-set-attribute-value-using-jquery-attr-method
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Get and Set attribute value using jQuery attr method
jQuery attr() method is used to get first selected element or set attribute value to matched all elements.
Syntax:
Get current attribute value for first matched content:
$(selector).attr(attribute);Set the new attribute and value to all matched elements:
$(selector).attr(attribute,value);Set multiple new attribute and value to all matched elements:
$(selector).attr({attribute:value, attribute:value...});Parameters:
attribute is attribute name of element
value attribute value to set on element
Below example shows how to get images source link using button click.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://laravelcode.com/assets/images/logo.png" alt="laravelcode" />
<button>Get image link</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function() {
var link = $('img').attr('src');
alert(link);
});
});
</script>
</body>
</html>If you want to change or add new attribute, pass the second parameter as attribure value.
Here is the example to change image changing src value.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://laravelcode.com/assets/images/logo.png" alt="laravelcode" /><br>
<button>Get image link</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function() {
$('img').attr('src', 'https://laravelcode.com/images/password-generator.jpg');
});
});
</script>
</body>
</html>If you want to change multiple attribute value to all matched elements, pass them to json object.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://laravelcode.com/assets/images/logo.png" title="laravelcode" /><br>
<button>Get image link</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
$('img').attr({src:'https://laravelcode.com/images/password-generator.jpg', title: 'Password generator', width: '200px'});
});
});
</script>
</body>
</html>I hope it will help you.
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK