js 获取html5的data属性实现方法

获取HTML5的data属性实现方法

在HTML5中的data属性可以以简单且可读性高的方式为元素添加数据，但是在JavaScript中获取这些属性的值并不像其他一些属性那样直观。下面介绍几种方法来获取HTML5的data属性。

1. 使用getAttribute()

我们可以使用DOM的 getAttribute() 方法来获取HTML5的data属性。示例如下：

<div id="example" data-value="123"></div>

<script>
  var exampleDiv = document.getElementById("example");
  var dataValue = exampleDiv.getAttribute("data-value");
  console.log(dataValue); // 输出 "123"
</script>

在这个示例中，我们创建了一个具有data-value属性的元素，并使用javascript的 getAttribute() 方法获取该属性的值。

2. 使用dataset属性

HTML5的data属性也可以通过元素的 dataset 属性来访问和修改。dataset 属性返回一个DOMStringMap对象，其中包含元素所有以" data- "开头的data属性。示例如下：

<div id="example" data-value="123"></div>

<script>
  var exampleDiv = document.getElementById("example");
  var dataValue = exampleDiv.dataset.value;
  console.log(dataValue); // 输出 "123"
</script>

在这个示例中，我们通过使用例元素的dataset属性来获取元素的data-value属性值。

3. 访问data属性自定义信息

对于HTML5的data属性，我们可以将它们看作是元素的自定义信息。利用JS，我们可以通过访问data属性，获取元素的自定义信息。下面是一个可以通过获取按钮上的data属性值，实现弹窗效果的例子：

HTML代码：

<button data-modal="modal-one">Click to Open Modal</button>

<div id="modal-one" class="modal">
  <h2>Modal One Title</h2>
  <p>Modal One Content</p>
  <button data-close>Modal One Close</button>
</div>

JavaScript代码：

const modalBtns = document.querySelectorAll('[data-modal]');
const modals = document.querySelectorAll('.modal');
const modalCloseBtns = document.querySelectorAll('[data-close]');

modalBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const modalName = btn.dataset.modal;
    showModal(modalName);
  });
});

modalCloseBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const modal = btn.closest('.modal');
    closeModal(modal);
  });
});

function showModal(modalName) {
  const modal = document.getElementById(modalName);
  modal.classList.add('active');
}

function closeModal(modal) {
  modal.classList.remove('active');
}

在这个例子中，我们可以通过访问data属性获取按钮的 data-modal 属性的值，然后利用该值显示相应的 modal，通过 data-close 属性关闭当前打开的modal。

总结：

在HTML5中，使用data属性来添加元素自定义信息很方便。然而，JavaScript中获取HTML5的data属性的值并不像其他属性那样直观。但是，通过使用DOM的 getAttribute() 方法或元素的dataset属性，我们可以轻松地获取HTML5的data属性。