在jq插件中,可以使用attr()方法很方便的设置与获取指定元素节点的属性值,当然在原生的js脚本中也有类似的方法来设置和获取元素节点的属性值,这篇博文就来说一下。
原生JS获取与设置元素的属性值
1、使用 setAttribute() 方法设置属性性
语法:
elementNode.setAttribute('属性','值');
注:elementNode 为使用 getElementById()、getElementsByTagName() 获取的属性节点!
示列代码:
<div id="mochu"></div> <script> var div = document.getElementById("mochu"); div.setAttribute("daia-url","http://baidu.com"); </script>
浏览器 F12 打开控制台查看源码
2、使用 getAttribute() 方法获取属性值
语法:
elementNode.getAttribute('属性');
示例代码:
<div id="mochu" data-src="img/img.png"></div> <script> var div = document.getElementById("mochu"); var src = div.getAttribute('data-src'); console.log(src); // 打印结果:img/img.png </script>
3、使用 attributes 属性获取元素节点的属性值
注:attributes() 属性返回节点的所有属性集合,即 NamedNodeMap。
语法:
elementNode[0].attributes
示例代码:
<div id="mochu" data-src="img/img.png" data-url="http://b.com"></div> <script> var div = document.getElementById("mochu"); var src = div.attributes['data-src'].nodeValue; var url = div.attributes['data-url'].nodeValue; console.log(src); console.log(url); </script>
打印结果:
img/img.png http://b.com