在HTML5中我们可以自定义的给元素添加一些属性,并且给这些属性一个值,这样我们可以使用一些更简单的方式来操作元素
- 1.我们可以使用
data-来给元素设置自定义属性;
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="test" data-name="zs"></div>
<script type="text/javascript">
//获取元素的自定义属性值
var dateset=document.querySelector(".test").dataset;
// 打印自定义设置的属性的值
console.log(dateset.name);
//设置自定义属性
dateset.age=20; // 在元素中显示 data-age="20"
dateset.stuSex="男"; // 在元素中显示 data-stu-sex = "男"
</script>
</body>
</html>
总结
1.通过data-前缀可以给元素设置属性
2.设置属性dataset是一个对象
3.若是在元素中设置 data-stu-name,在获取该元素的属性值的时候,将大于等于第二个横线后的首字母改为大写,即: 设置data-stu-name属性后,获取的时候是:dateset.stuName
4.使用 data-name="zs" 这种方式设置元素的属性值,使用dateset.name获取属性值
3830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
