获取元素属性

最新推荐文章于 2023-01-05 11:34:46 发布

weixin_30407099

最新推荐文章于 2023-01-05 11:34:46 发布

阅读量299

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zzzkun/p/9644713.html

版权

获取元素的属性分为两种类型：

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 οnclick="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 οnclick="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>

转载于:https://www.cnblogs.com/zzzkun/p/9644713.html

weixin_30407099

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取元素属性

获取元素的属性分为两种类型：1-获取元素常见的属性（class,id,type,value……）2-获取自定义的元素的属性（data-value,data-mess…….）获取元素的属性，设置元素的属性：1-原生JS 设置属性 .setAttribute("属性","值") 获取属性 .getAttribute("属性")2-jquery ...
复制链接

扫一扫