如何使用data属性？-从小白到大佬

什么是data属性？

data属性是HTML5中的新属性，它允许我们在HTML元素上存储自定义数据。

它的语法很简单，只需要在属性名前加上"data-"即可。例如：

<div data-id="123">这是一个div元素</div>

这个例子中，我们在div元素上添加了一个自定义属性"data-id"，并将其值设置为"123"。

为什么要使用data属性？

使用data属性可以让我们在HTML元素上存储任何类型的数据，包括字符串、数字、布尔值、对象、数组等等。

这些数据可以通过JavaScript来读取和修改，这样我们就可以在不使用全局变量的情况下，将数据传递给不同的函数和模块。

此外，使用data属性还可以让我们在HTML元素上添加对应的元数据，从而提高网站的可访问性和可用性。

如何使用data属性？

1. 读取data属性的值

我们可以使用JavaScript来读取HTML元素上的data属性值。

<div id="myDiv" data-id="123">这是一个div元素</div>

<script>
  var myDiv = document.getElementById("myDiv");
  var dataId = myDiv.dataset.id;
  console.log(dataId); //输出"123"
</script>

这个例子中，我们首先使用getElementById方法获取了id为"myDiv"的元素，然后使用dataset属性来读取它的"data-id"属性的值。

需要注意的是，我们使用dataset属性时，属性名不需要加上"data-"前缀，JavaScript会自动识别并转换为camelCase风格的属性名。

2. 修改data属性的值

我们也可以使用JavaScript来修改HTML元素上的data属性值。

<div id="myDiv" data-id="123">这是一个div元素</div>

<script>
  var myDiv = document.getElementById("myDiv");
  myDiv.dataset.id = "456";
  console.log(myDiv.dataset.id); //输出"456"
</script>

这个例子中，我们首先使用getElementById方法获取了id为"myDiv"的元素，然后直接修改它的"data-id"属性的值。

需要注意的是，我们使用dataset属性时，属性名不需要加上"data-"前缀，JavaScript会自动识别并转换为camelCase风格的属性名。

3. 使用data属性存储对象和数组

我们可以使用data属性来存储JavaScript对象和数组。

<div id="myDiv" data-info='{"name":"John","age":30}'>这是一个div元素</div>

<script>
  var myDiv = document.getElementById("myDiv");
  var dataInfo = JSON.parse(myDiv.dataset.info);
  console.log(dataInfo.name); //输出"John"
  console.log(dataInfo.age); //输出30
</script>

这个例子中，我们首先在"data-info"属性中存储了一个JavaScript对象，然后使用JSON.parse方法将其转换为JavaScript对象，最后可以像访问普通对象一样，访问其中的属性。

同样地，我们也可以使用data属性来存储JavaScript数组。

4. 使用data属性来实现网页功能

除了存储数据之外，我们还可以使用data属性来实现一些网页功能，例如显示/隐藏元素、实现标签页切换等等。

<button id="btnToggle" data-target="#myDiv">点击切换</button>
<div id="myDiv" style="display:none">这是一个div元素</div>

<script>
  var btnToggle = document.getElementById("btnToggle");
  var target = document.querySelector(btnToggle.dataset.target);
  btnToggle.addEventListener("click", function() {
    if (target.style.display === "none") {
      target.style.display = "block";
    } else {
      target.style.display = "none";
    }
  });
</script>

这个例子中，我们在button元素上添加了"data-target"属性，用于指定要切换显示/隐藏的目标元素。

然后，我们使用JavaScript来获取这个目标元素，并在按钮被点击时，通过修改目标元素的"display"样式属性，来实现显示/隐藏的效果。