HTML5自定义属性对象Dataset

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,694评论 1 92
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 47,150评论 6 342
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,120评论 19 139
  • 今天是开心的一天,因为困扰我很久的问题似乎有了答案,所谓念念不忘必有回响吧,只希望将此刻的想法保持下去。 ...
    是小五啊阅读 1,864评论 0 0
  • 家辞西川上,读书武功塬。 耐得腹中肌,穿行路辛难。 漫步绿野路,书声瓦阁间。 恨不头悬梁,胸藏书万卷。 夜读灯光薄...
    阿弘哥阅读 2,839评论 0 1

友情链接更多精彩内容