HTML5自定义属性对象Dataset

2016-11-12  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读