美文网首页
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

作者: 左耳击水兽 | 来源:发表于2016-11-12 22:54 被阅读0次

data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。

举例

<body>
    <div class='showBox'></div>
    <input type="button"  value='贾玲'  age=11 skill='西兰花'  data-name='jl'>
    <input type="button"  value='高圆圆' data-name='gyy'>
    <input type="button"  value='张杰' data-name='zj'>
</body>
<script>
        var buttonlis = document.querySelectorAll("input");
        //遍历
        for(var i = 0; i < buttonlis; i++){
                    buttonlis[i].onclick = function(){
                               console.log(this.data['name']);
                               //也可以这样写
                              console.log(this.data.name);   
                   }
         }
</script>

相关文章

  • html\css笔记1

    1.data-*自定义属性:html5增加的新功能自定义数据属性 dataset属性存取data-*自定义属性的值...

  • HTML5 自定义属性

    自定义属性:添加前缀“data-” dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义...

  • HTML5自定义属性对象Dataset

    data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,...

  • data- 属性

    可以暂存自定义的数据, node.dataset 可以访问 data- 属性构造的对象,被 JavaScript ...

  • HTML5中data-*自定义属性作用

    data-*是HTML5新增的一个自定义数据属性功能,作为可以暂存数据使用。利用dataset可以获取data-属...

  • `data-`属性的作用是什么?

    data-为H5新增的为前端开发者提供自定义的属性,这些属性集可以通过对象的 dataset 属性获取,不支持该属...

  • js、jquery的属性操作方法总结

    目录 属性分为三种: js原生属性操作方法获取属性设置属性删除属性自定义数据属性 dataset获得自定义属性的值...

  • 自定义属性 - 2018-05-15

    2018-05-15 创建 HTML5 data-* 自定义属性 HTML5中添加了data-的方式来自定义属性,...

  • Dataset与Checkbox

    1.最近写后台用到了checkbox,顺便温习一下H5的自定义属性对象dataset 2.效果是这样式的: 3结构...

  • HTML5 标签自定义属性规范 dataset

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

网友评论

      本文标题:HTML5自定义属性对象Dataset

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