HTML5 - 数据集属性

简介: HTML5定义了关于操作标准自定义属性的用法,以下是一个示例: 元素属性

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>
目录
相关文章
|
5月前
|
Web App开发 缓存 搜索推荐
HTML中meta标签中属性详解并设置页面缓存策略
HTML中meta标签中属性详解并设置页面缓存策略
292 0
|
6月前
|
编解码
HTML 里 img 元素的 src 和 srcset 属性有何区别?
HTML 里 img 元素的 src 和 srcset 属性有何区别?
60 0
|
1月前
|
存储 开发者 SEO
|
1月前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 027 HTML输入属性(1/2)
编程笔记 html5&css&js 027 HTML输入属性(1/2)
|
1月前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
1月前
|
存储 移动开发 前端开发
编程笔记 html5&css&js 010 HTML全局属性
编程笔记 html5&css&js 010 HTML全局属性
|
2月前
|
移动开发 前端开发 JavaScript
分享24个强大的HTML属性,建议每位前端工程师都应该掌握!
HTML属性非常多,除了一些基础属性外,还有许多有用的特别强大的属性
|
3月前
|
XML JavaScript 数据格式
python - bs4提取XML/HTML中某个标签下的属性
python - bs4提取XML/HTML中某个标签下的属性
29 0