H5中data-xxxx属性

ゝ一世哀愁。 2023-07-19 10:54 28阅读 0赞

data-\* 属性是 HTML5 中的新属性。

本文转自：https://www.jianshu.com/p/57bf9cc64ef2

# 定义和用法 #

（1）data-\* 属性用于存储页面或应用程序的私有自定义数据。

（2）data-\* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

# data-\* 属性包括两部分： #

（1）属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符  
（2）属性值可以是任意字符串

data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

#myDiv{
      position: ralative;
    }
     
    #myDiv:hover:after{
      position: absolute;
      top: 0px;
      left: 0px;
      content: attr(data-attribute);
      color: red;
    }

# 如何获取data属性的值？ #

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

## 一、使用getAttribute来获取 ##

var myDiv = document.getElementById("myDiv");
    var theValue = myDiv.getAttribute("user-defined-attribute");

## 二、使用Html5自定义属性对象Dataset来获取 ##

var myDiv = document.getElementById("myDiv");
    var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myDiv.dataset.otherAttribute

# 如果Html元素定义了多个自定义属性，如何获取？ #

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

## 一、使用循环遍历 ##

## 二、使用dataset属性 ##

`var expense = document.getElementById('myDiv').dataset;`

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

### 1、让所有的自定义的属性值塞到一个数组中 ###

var chartInput = [];
     
    for (var item in expense) {
      chartInput.push(expense[item]);
    }

### 2、删掉一个data属性 ###

delete myDiv.dataset.attribute;

### 3、增加一个data属性 ###

myDiv.dataset.attribute4 = 'value4';

### dataset的兼容性处理 ###

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
      myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
      var theValue = myDiv.dataset.attribute; // 获取自定义属性
    } else {
      myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
      var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
    }

# 结语： #

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。