网站建设   网站建设技术   网页设计   JavaScript  

JS dataset:获取HTML元素的自定义属性

人浏览  发布时间:2021-10-29

HTML 5 允许用户为元素自定义属性,但要求添加 data- 前缀,目的是为元素提供与渲染无关的附加信息,或者提供语义信息。例如: div id = box data - myid = 12345 data - myname = zhangsan data - mypass = zhang123 自定义数据属性 / div 添加自定义属性之后,在 JavaScript 中可以通过元素的 dataset 属性访问自定义属性。dataset 属性的值是一个 DOMStringMap 实例,也就是一个名值对的映射。在这个映射中,每个 data-name 形式的属性都会有一个对应的属性,只不过属性名没有 data- 前缀。 浏览器支持状态:Firefox 6+ 和 Chrome。 示例 下面代码演示了如何自定义属性,以及如何读取这些附加信息。 var div = document . getElementById ( box ); //访问自定义属性值 var id = div . dataset . myid ; var name = div . dataset . myname ; var pass = div . dataset . mypass ; //重置自定义属性值 div . dataset . myid = 66666 ; div . dataset . myname = zhangsan ; div . dataset . mypass = zhangsan666 ; //检测自定义属性 if ( div . dataset . myname ) { console . log ( div . dataset . myname ); }...
HTML 5 允许用户为元素自定义属性,但要求添加 data- 前缀,目的是为元素提供与渲染无关的附加信息,或者提供语义信息。例如:

		
  1. <div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhang123">自定义数据属性</div>
添加自定义属性之后,在 JavaScript 中可以通过元素的 dataset 属性访问自定义属性。dataset 属性的值是一个 DOMStringMap 实例,也就是一个名值对的映射。在这个映射中,每个 data-name 形式的属性都会有一个对应的属性,只不过属性名没有 data- 前缀。 浏览器支持状态:Firefox 6+ 和 Chrome。

示例

下面代码演示了如何自定义属性,以及如何读取这些附加信息

		
  1. var div = document.getElementById("box");
  2. //访问自定义属性值
  3. var id = div.dataset.myid;
  4. var name = div.dataset.myname;
  5. var pass = div.dataset.mypass;
  6. //重置自定义属性值
  7. div.dataset.myid = "66666";
  8. div.dataset.myname = "zhangsan";
  9. div.dataset.mypass = "zhangsan666";
  10. //检测自定义属性
  11. if (div.dataset.myname) {
  12. console.log(div.dataset.myname);
  13. }

点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图