关于H5自定义属性

今天做步步高公司的校招Web前端面试题,考到了H5中的自定义属性。说实话真的一脸懵逼,啥是自定义属性????其实这个自定义属性以前做项目用框架时经常见到,但是并没有去了解。

自定义属性的存在形式

其实就是HTML标签中的data-*属性

作用

自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进DOM中,对于整个DOM的布局和表现无任何影响,但是却可以方便操控整个网页的交互以及想要表达的效果。

自定义属性的设置

  • 直接在标签中设置:
<span id="test" data-age="21">test</span>
  • 通过js设置
var test = document.getElementById('test');
test.dataset.age = "21";
  • 通过jQuery设置
$('test').attr('data-age','21');
或者
$('test').data('age','21');

自定义属性的获取

  • 使用js获取
var test = document.getElementById('test');
test.dataset.age
  • 使用jQuery获取
$('test').attr('data-age');
或者
$('test').data('age');

我想说的话

学习进步离不开网友的支持,希望大家以后多多支持,能够指出文中不足与疑惑的点,我会为大家一一解答。有兴趣的小伙伴可以加入QQ群:852590787
QQ

猜你喜欢

转载自blog.csdn.net/weixin_42420703/article/details/82152817