JavaScript 自定义属性 data-*使用介绍

在 HTML5 中，我们可以使用自定义属性 data-* 来为 HTML 元素添加自定义属性，这些自定义属性可以用来存储任意类型的数据，也可以用 Javascript 来对其进行读写操作。

基本用法

语法格式如下:

<element data-attributeName="value">...</element>

其中 attributeName 就是你自定义属性的名字，而 value 就是对应的属性值了。

在 Javascript 中获取自定义属性的值可以使用 dataset 属性，例如：

<!-- html -->
<div id="myDiv" data-value="hello world"></div>

// js
const myDiv = document.querySelector('#myDiv');
console.log(myDiv.dataset.value); // 输出 "hello world"

这里的 dataset 属性就是能够获取到所有 data-* 自定义属性的名称和值，它是一个对象，其中的属性名就是 data-* 自定义属性去除 data- 前缀并转换成驼峰式命名法后的形式，例如上述例子中的 data-value 自定义属性转换后就是 myDiv.dataset.value。

示例一：列表分页

下面是一个示例，帮助我们实现基于 data-* 自定义属性实现列表分页的功能。我们有一个默认隐藏掉的分页导航栏，其中的分页按钮通过 data-page 自定义属性记录下了对应的页码：

<div id="pagination" style="display: none;">
  <button data-page="1">1</button>
  <button data-page="2">2</button>
  <button data-page="3">3</button>
  <button data-page="4">4</button>
  <button data-page="5">5</button>
</div>

<ul id="list">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
  <li>list item 10</li>
</ul>

接下来利用 Javascript，我们将根据当前的页码，来显示对应的列表内容。下面是代码实现：

const pagination = document.getElementById('pagination');
const list = document.getElementById('list');

pagination.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    const page = event.target.dataset.page;
    const start = (page - 1) * 5;
    const end = start + 5;
    for (let i = 0; i < list.children.length; i++) {
      if (i < start || i >= end) {
        list.children[i].style.display = 'none';
      } else {
        list.children[i].style.display = 'block';
      }
    }
  }
});

在上面的代码中，我们给分页按钮添加了点击事件监听器，当用户点击的时候，我们就会获取到对应的页码，然后利用简单的循环和 display 属性来显示或隐藏对应的列表项。

示例二：图像预加载

下面，我们来看一个例子，通过使用 data-* 自定义属性来实现图像预加载的功能。有时候我们需要在网页中预加载一些图片，特别是一些比较大的图片，为了防止用户等待过长的时间，我们可以在页面加载时就开始预加载图片。

我们可以在每个需要预加载的图片上添加一个 data-src 自定义属性，用来记录对应图片的源地址。比如下面的代码：

<img src="loading.gif" data-src="image1.jpg" alt="Pic 1">
<img src="loading.gif" data-src="image2.jpg" alt="Pic 2">
<img src="loading.gif" data-src="image3.jpg" alt="Pic 3">

其中 loading.gif 是我们的占位符图片，即尚未加载完成的图片的展示。

接着，我们通过 Javascript 来实现图片的预加载。

// 获取页面上所有的带有 data-src 属性的 img 标签
const images = document.querySelectorAll('img[data-src]');

// 定义一个计数器，记录已经被预加载的图片数量
let loaded = 0;

// 循环遍历每张图片，并为每张图片添加 onload 事件监听器
for (let i = 0; i < images.length; i++) {
  const image = images[i];
  image.onload = () => {
    loaded++;
    // 当所有图片全部被加载完成时，将所有占位符图片替换为对应的图片
    if (loaded === images.length) {
      for (let j = 0; j < images.length; j++) {
        images[j].src = images[j].getAttribute('data-src');
      }
    }
  };
  // 设置图片的 src 属性，开始加载图片
  image.src = image.getAttribute('data-src');
}

在上述代码中，我们首先获取了所有带有 data-src 自定义属性的图片，然后遍历每张图片，为其添加一个 load 事件监听器，在图片加载完成后记录计数器。当所有图片全部被加载完成时，我们就可以将所有的占位符图片替换为对应的图片。

结论

以上就是 data-* 自定义属性的使用介绍，我们可以看到，在实际开发中，利用自定义属性可以帮助我们更好地利用 Javascript 操作 HTML 元素，更方便地实现一些复杂的功能实现。如果您想要深入了解 Javascript 和 DOM 编程，一定要深入学习 data-* 自定义属性的使用。