H5中怎么获取和设置自定义属性

1. 什么是自定义属性？

自定义属性指的是在 HTML 元素中创建的非标准属性，它们通常不被浏览器解析，但是可以被 JavaScript 代码访问。自定义属性的命名应该以 "data-" 为前缀，这是 HTML5 规范中的建议。

2. 如何获取属性值？

可以使用元素的 getAttribute() 方法来获取自定义属性的值：

    // HTML
    <div id="myDiv" data-color="red"></div>

    // JavaScript
    const myDiv=document.querySelector('#myDiv');
    const color=myDiv.getAttribute('data-color');
    console.log(color); // "red"
    

3. 如何设置属性值？

可以使用元素的 setAttribute() 方法来设置自定义属性的值：

    // HTML
    <div id="myDiv"></div>

    // JavaScript
    const myDiv=document.querySelector('#myDiv');
    myDiv.setAttribute('data-color', 'blue');
    console.log(myDiv.getAttribute('data-color')); // "blue"
    

4. 如何使用自定义属性？

通过自定义属性，可以在 HTML 元素中存储一些额外的信息，在需要时可以通过 JavaScript 访问并使用这些信息，例如：

    // HTML
    <ul>
      <li data-id="1">item 1</li>
      <li data-id="2">item 2</li>
      <li data-id="3">item 3</li>
    </ul>

    // JavaScript
    const items=document.querySelectorAll('li');
    items.forEach(item=> {
      const id=item.getAttribute('data-id');
      item.addEventListener('click', ()=> {
        alert(`You clicked item #${id}`);
      });
    });
    

总结

通过自定义属性，可以在 HTML 元素中存储一些额外的信息，在需要时可以通过 JavaScript 访问并使用这些信息。通过使用 "data-" 作为前缀来命名自定义属性，可以避免与 HTML5 规范中的标准属性冲突。使用 getAttribute() 和 setAttribute() 方法可以轻松地获取和设置自定义属性的值。