js获取元素属性
2018-11-06 本文已影响0人
婲魢銣佌亾荷姒堪
获取元素的属性分为两种类型：
1-获取元素常见的属性（class,id,type,value……）
2-获取自定义的元素的属性（data-value,data-mess…….）
获取元素的属性，设置元素的属性：
1-原生JS
设置属性 .setAttribute("属性","值")
获取属性 .getAttribute("属性")
2-jquery
设置属性 .attr("属性","值")
获取属性 .attr("属性")
下面通过一个例子介绍一下，如何获取和设置元素的属性；
<!DOCTYPE html>
<html>
<head>
<meta 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");
//getAttribute()取值属性
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取值，更加方便
console.log("通过dataset获得data-leaves====" + tree.dataset.leaves);
console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight);
//注意在这里连字符的访问时，属性要写成驼峰形式
}
</script>
</body>
</html>
上面有两个test, test1是测试元素常见属性，test2是测试元素自定义属性
