美文网首页
HTML5 标签自定义属性规范 dataset

HTML5 标签自定义属性规范 dataset

作者: Rui哥 | 来源:发表于2019-08-12 11:48 被阅读0次

    当我们在HTML 中获取元素的属性值, 或者给某个元素设置属性值时通常有2种情景:

    情景1:
    获取和设置的都是HTML标签系统自带的属性, eg: class id 属性.

    <div id="nav" class="search"> <div>
    

    情景2:
    获取和设置的是 程序员自定义的HTML 属性.eg: age sex属性

    <div age="18" sex="男"> </div>
    



    我们通常的做法:

    1. HTML 自带的属性, 可以使用点语法或者 getAttribute() setAttribute() 来读取或者设置.
    2. 程序员自定义的属性, 只能使用 getAttribute() 和 setAttribute() 方法来操作

    H5 自定义属性规范要求

    在H5之前,通常我们在对HTML元素的属性进行操作时, 都有一个选择困难症, 我们根本没有判断 某个属性究竟是系统自带属性还是程序员自己定义的属性, H5 之后我们在开发HTML网页时都有一个大家的约定, 如果是程序员自定义的属性, 属性名全部以 data- 打头.即, 比如: 我想自己定义一个名为age的属性, 那么这个属性的名字应该为: data-age , 这样, 大家以后看到属性是 data-打头的就知道这个属性是自定义属性, 需要使用 getAttribute() 和 setAttribute() 来操作.

    H5 新增获取设置自定义HTML属性的方法

    <div data-age="18" data-sex="男"> </div>
    
    
    在js 中我们就可以这样做了
    var  div = document.querySelector('div');
    
    
    var age = div.dataset.age; // 获取 data-age 属性对应的属性值
    等价于 div.getAttribure('data-age');
    
    
    div.dataset.age = 30; // 给 data-age 属性值修改为 30
    等价于 div.setAttribute('data-age', 30);
    
    
    其实, 当我们把自定义属性以 'data-' 开头命名后, 系统会把所有的以 `data-` 打头的 自定义属性装进一个 key-value 的一个json 对象中
    比如: 
    {age:"18", sex:"男''}
     
    

    自定义属性名的注意事项:

    当自定义的名称中 出现中划线后,如下:
    <div data-list-name ="张三"> </div>
    
    此后, 我们不能使用 div.list-name 来获取属性 `data-list-name` 的值, 而要使用驼峰命名来获取,如下: 
    var name = div.listName ;
    

    其实, 想要使用H5 新增的操作自定义属性的方法很简单, 当我们把 自定义属性以 data- 打头规范命名后, 只需要 `console.log(div.dataset) 即可明白.

    <div class="test" data-age="18" data-sex="男" data-my-age="34" data-my_kid="小样"></div>
    
    console.log(div.dataset) ; 结果如下: 
    {age: "18", sex: "男", myAge: "34", my_kid: "小样"}
    
    

    注意:
    dataset.属性名 这种H5新增的方式, 只有在IE11 上才能用, 有兼容性问题

    相关文章

      网友评论

          本文标题:HTML5 标签自定义属性规范 dataset

          本文链接:https://www.haomeiwen.com/subject/nkvyjctx.html