获取元素的属性分为两种类型：
1-获取元素常见的属性（class,id,type,value…）
2-获取自定义的元素的属性（data-value,data-mess…）
获取元素的属性，设置元素的属性：
1-原生JS
设置属性 .setAttribute("属性","值") 获取属性 .getAttribute("属性")
2-jquery
设置属性 .attr("属性","值") 获取属性 .attr("属性")
下面通过一个例子介绍一下，如何获取和设置元素的属性；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取元素属性</title> <style> * { margin:0; padding:0; list-style:none; } </style> </head> <body> <div id="mayouchen"> <div style="background:red;height:20px">元素属性获取</div> <div class="test1"> <p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p> <input value="OK" class="mayouchen"> <button onclick="mayouchen1()">获取元素属性</button> </div> <div style="background:green;height:20px">自定义属性获取</div> <div class="test2"> <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被获取的元素</div> <button onclick="mayouchen2()">获取自定义元素属性</button> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { }); function mayouchen1() { document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen"); document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1"); document.getElementsByTagName("INPUT")[0].getAttribute("id"); document.getElementsByTagName("INPUT")[0].getAttribute("class"); console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id")); console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class")); } function mayouchen2() { var tree = document.getElementById("tree"); console.log("data-leaves======" + tree.getAttribute("data-leaves")); console.log("data-plant-height===============" + tree.getAttribute("data-plant-height")); tree.setAttribute("data-come", "49"); console.log("通过dataset获得data-leaves====" + tree.dataset.leaves); console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight); } </script> </body> </html>
-
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
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
上面有两个test, test1是测试元素常见属性，test2是测试元素自定义属性
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
