HTML dataset 的用途?( HTMLElement.dataset)

最新推荐文章于 2024-05-02 09:01:20 发布

wyk760629476

最新推荐文章于 2024-05-02 09:01:20 发布

阅读量552

点赞数 1

分类专栏：面试基础题目 h5 文章标签： html

本文链接：https://blog.csdn.net/wyk760629476/article/details/116170025

版权

面试基础题目同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

用法

HTML5规定,可以给元素添加非标准的属性,就是提供与渲染无关,或者提供语义信息的属性,可以随意添加,任意命名
添加属性必须以data-做前缀
使用时候直接用元素的dataset属性,即可获取对应的属性值

使用驼峰命名

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="test" data-user-name="user" data-name="testName">
	</div>
		
</body>
<script type="text/javascript">
	var test = document.querySelector("#test")
	console.log(test.dataset.userName)//user
    conaole.log(test.dataset.name)//testName
</script>
</html>

应用
可以统一给某个特定属性的元素添加样式

<!--我们自定义一个data-chb="header"的属性，希望具备这个属性的div区域背景颜色为黑色，文字为白色，居中显示；不具备data-chb自定义属性的div按照默认方式显示-->
<html>
<body>
  <div data-chb="header">
    <h1>我是使用了data-chb自定义属性的div</h1>
  </div>
  <br/>
  <div>
    我没有使用data-chb自定义属性，该怎么展现就怎么展现；
  </div>
</body>
</html>
<style>
 .ui_header {
  background-color: black;
  text-align: center;
  color:white;
  border:1px solid #000;
}
</style>
<script type="text/javascript">
    window.onload=function(){
       var elems = document.getElementsByTagName("div");
       if(elems!=null&&elems.length>0){
          var length = elems.length;
          //遍历所有DIV控件
          for(var i=0;i<length;i++){
              var elem = elems[i];
              //获取该控件的自定义属性
              var customAttr = elem.dataset.chb;
             //也可以通过如下方式获得自定义属性
             //var customAttr = elem.dataset["chb"];
             //如果是我们预先定义好的header值，表示需要处理
             if(customAttr=="header"){
                //添加样式
                elem.setAttribute("class","ui_header");
             }
          }
      }
  }
</script>

wyk760629476

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML dataset 的用途?( HTMLElement.dataset)

HTML5规定,可以给元素添加非标准的属性,就是提供与渲染无关,或者提供语义信息的属性,可以随意添加,任意命名添加属性必须以data-做前缀使用时候直接用元素的dataset属性,即可获取对应的属性值使用驼峰命名 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>&l
复制链接

扫一扫