1. 首页
  2. IT资讯

HTML5中的data-*自定义属性

HTML5增加了一项新功能是:自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可以通过脚本进行定义和数据存取。在项目实践中非常有用。

例如:

<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and-class = "Hello"></div>

使用attribute方法存取 data-* 自定义属性的值

使用attribute方法存取 data-* 自定义属性的值非常方便:

var div = document.getElementById("div1"); //获取自定义的值 var myId = div.getAttribute("data-id"); var myClass = div.getAttribute("data-class"); var my = div.getAttribute("data-id-and-class"); console.log(myId);      //myId console.log(myClass);   //myClass console.log(my);        //Hello  //设置自定义的值 div.setAttribute("data-name","nicai") 

方法能在所有现代浏览器中正常工作,但它不是HTML5的自定义data-*属性被使用的目的,不然和我们以前使用自定义属性就没有什么区别了,如下:

<div id="div2" myName = "Hello"></div> <script>     var div = document.getElementById("div2");     var myName = div.getAttribute("myName");     console.log(myName);     //Hello </script> 

这种“原始”的自定义属性和上面的data-*自定义属性没有什么区别,只是属性名不一样。

dataset属性存取data-*自定义属性的值

这种方式通过访问一个元素的dataset属性来存取data-*自定义属性的值。这个dataset属性是HTML5 Javascript API的一部分,用来返回一个所有选择元素的data-*属性的DOMStringMap对象。

使用这种方法时,不是使用完整的属性名,如data-id来存取数据,应该去掉data-前缀。

还有一点特别注意的是:data-属性名如果包含了连字符,例如 data-id-and-class,连字符将被去掉,并转换为驼峰式的命名,前面的属性应该写成idAndClass。

下面看一个例子:

<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and-class = "Hello"></div> <script>     var div = document.getElementById("div1");      var attr = div.attributes;     var data = div.dataset;     var id = div.id;     var myId = div.dataset.id;     var iac = div.dataset.idAndClass;     console.log(attr);      //NamedNodeMap对象     console.log(data);      //DOMStringMap对象     console.log(id);        //div1     console.log(myId);      //myId     console.log(iac);       //Hello </script> 

如果你想删掉一个data-属性,可以这么做:

delete div.dataset.id;

看起来是很好用的,但是不幸的是,新的dataset属性只有在Chrome8+ 、FireFox(Gecko) 6.0 、 Internet Explore 11+、 Opera 11.10+、 Safari 6+ 浏览器中实现,所以在此期间最好还是使用getAttribute和setAttribute来操作。

关于data-*属性选择器

在实际开发中,你可能会发现他很有用,可以根据自定义的data-属性选择相关的元素。例如使用querySelectAll选择元素,例如

//选择所有具有data-class属性的元素 var div = document.querySelectorAll("[data-class]");  //选择所有data-class属性值为my的元素 var div = document.querySelectorAll("[data-class='my']"); 

同样的我们也可以通过data-属性值对应的元素设置CSS样式,如下

<style>     div[data-class]{         width: 100px;         height: 100px;         background: #8959a8;         border: 1px solid #cccccc;     }     div[data-class="my"]{         box-shadow: 0 0 5px 5px #CCCCCC;     } </style> <div id="div1" data-class = "myClass"></div> <div id="div2" data-class = "my" ></div> 

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362

原文始发于:HTML5中的data-*自定义属性

主题测试文章,只做测试使用。发布者:玩家L-,转转请注明出处:http://www.cxybcw.com/22064.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code