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

HTML5 - 数据集属性

日期:2019-05-02点击:343

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业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

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

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章