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>

最后编辑于：2023.12.22 11:09:33