获取元素的属性分为两种类型：
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="princekin">
<div style="background:red;height:20px">元素属性获取</div>
<div class="test1">
<p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p>
<input value="OK" class="princekin">
<button onclick="princekin1()">获取元素属性</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="princekin2()">获取自定义元素属性</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
});
function princekin1() {
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
document.getElementsByTagName("INPUT")[0].setAttribute("class", "princekin");
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 princekin2() {
var tree = document.getElementById("tree");
//getAttribute()取值属性 与上一种方法的区别就是需要设置值得时候加上data-*
console.log("data-leaves======" + tree.getAttribute("data-leaves"));
console.log("data-plant-height===============" + tree.getAttribute("data-plant-height"));
//setAttribute()赋值属性
tree.setAttribute("data-come", "49");
// data-前缀属性可以在JS中通过dataset取值，更加方便 但目前只在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现，所以在此期间最好用的getAttribute和setAttribute来操作。
console.log("通过dataset获得data-leaves====" + tree.dataset.leaves);
console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight);
//注意在这里连字符的访问时，属性要写成驼峰形式 不带data前缀
}
</script>
</body>
</html>
在实际开发中常用这种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>获取自定义属性</title>
<style type ="text/css">
.user {
width : 256px ;
height : 200px ;
}
.user[data-name='feiwen'] {
color : brown;
}
.user[data-name='css'] {
color : red;
}
</style>
</head>
<body>
// 在实际开发中，我们可能会用到querySelectorAll选择元素 获取自定义的data-属性选择相关的元素
<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > 码头 </div>
<script>
// 选择所有包含 'data-flowering' 属性的元素
var target = document.querySelectorAll ( '[data-flowering]' ) ;
console.log(target);
// 选择所有包含 'data-text-colour' 属性值为red的元素
document.querySelectorAll ( '[data-text-colour="red"]' ) ;
</script>
</body>
</html>
