您现在的位置是：首页 > 文章详情

HTML5 - 数据集属性

日期：2019-05-02点击：510收藏

HTML5定义了关于操作标准自定义属性的用法，以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素属性</title>
</head>
<body>
<div id="app" data-name="ysw" data-id="1601140819" data-u-id="412728199707074557" data-key="00001" data-value="简单点" >
</div>
<script type="text/javascript">

    let idEle = document.getElementById("app");
    console.log("-----------------------");
    /*
    * 对于元素的非标准属性的操作的4个方法
    * */
    idEle.setAttribute("var1","true");
    console.log(idEle);
    console.log(idEle.getAttribute("var1"));
    console.log(idEle.hasAttribute("var1"));
    idEle.removeAttribute("var1");
    console.log("-----------------------");
    /*
    * HTML5关于自定义属性的合法用法：数据集属性
    * HTML5定义了一种标准的附加额外数据的方法，任意以"data-"开头的属性都是合法的，这些
    * "数据集属性"将不会对其元素表现产生影响。
    * HTML5在Element对象上定义了dataset属性，该属性值是一个DOMStringMap对象，存储了所有
    * 该Element对象以data-开头的属性及其值。
    * dataset.x保存了data-x属性的值，代连字符的属性对应于驼峰式命名法属性名，例如：
    * data-student-name属性的访问方式为：dataset.studentName
    * */
    console.log(idEle.dataset);
    console.log(idEle.dataset.name);
    console.log(idEle.dataset.id);
    console.log(idEle.dataset.uId);
    console.log(idEle.dataset.key);
    console.log(idEle.dataset.value);

</script>
</body>
</html>

原文链接：https://yq.aliyun.com/articles/701010

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。