IT学习网是免费的终身在线学习平台,现在主要提供IT(互联网)方面的教程,博客等方面的内容
主页 > 前端 > > 正文

儿童编程学习H5中data-*容易忽略的问题

来源:IT学习网整理 发布时间:2020-02-14 18:48 标签:问题忽略容易data-
浏览:
H5添加了data-*属性,非常方便儿童编程学习。但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了,alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果"/>H5中data-*容易忽略的问题

前端开发前端导航工具/手册更多栏目

折扣返利

网站投稿

书籍/周边

站内搜索

fly63前端网

提交

我要投稿

H5中data-*容易忽略的问题

时间: 2019-08-08阅读: 142标签: 属性

H5添加了data-*属性,非常方便。但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了

测试代码如下:

<html> <head> <script type="text/javascript" src="http://www.fly63.com/article/detial/5193/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn2").click(function(){ alert($("div").data("id")); alert($("div").data("Id")); alert($("div").data("otherId")); alert($("div").data("OtherId")); alert($("div").data("OTHERID")); var datas = $("div").data(); }); }); </script> </head> <body> <button>alert</button> <div data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div> </body> </html>

alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果:

儿童编程学习,data-,容易,忽略,问题 . 儿童编程学习H5中data-*容易忽略的问题


总结: 遵循标准写法

1. data-* 所有字符要小写。

2.多个单词采用横线隔开,例如data-other-id => otherId  读出来的属性会去掉横线并将首字母大写。

.two_ads{overflow: hidden;} .two_ads a{float: left;width: 49.443%;} .two_ads a:nth-child(2){float: right;} .two_ads img{display: block;margin: 5px 0;max-width: 100%;}

热门文章

  • C++构造函数初始化列表
    C++构造函数初始化列表

    C++构造函数初始化列表

    构造函数的一项重要功能是对成员变量进行初始化,为了达到这个目的,可以在构造函数的函数体中对成员变量一一赋值,还可以采用 初始化列表 。 C +...

  • 抢占超声医学影像产业学习it的网站C位
    抢占超声医学影像产业学习it的网站C位

    抢占超声医学影像产业学习it的网站C位

    随着全球AI人工智能技术的快速发展与应用 全球医疗领域的智能化 科技化成为大势所趋 据相关资料数据统计 2016年全...

  • “编程从娃娃抓起”:逃得过“奥数” 又
    “编程从娃娃抓起”:逃得过“奥数” 又

    “编程从娃娃抓起”:逃得过“奥数” 又

    您所在的位置: 杭州网 > 新闻中心 > 国内新闻 “编程从娃娃抓起”:逃得过“奥数” 又要被编程套住 2019-03-22 09:18:07;杭州网 新华网 少儿编程火了,打开手机...

  • coreldraw教程网Photoshop iPad完整版本正式上
    coreldraw教程网Photoshop iPad完整版本正式上

    coreldraw教程网Photoshop iPad完整版本正式上

    Photoshop iPad完整版本正式上架苹果App Store...

  • 51自学网ps视频教程走在时尚前端的猎豹
    51自学网ps视频教程走在时尚前端的猎豹

    51自学网ps视频教程走在时尚前端的猎豹

    当消费者发现汽车一味的“大”并不能完全解决出行需求,反而影响了在城市中穿梭的便捷性之后,更加贴合年轻人...

后端

更多 >
后端趣味编程unzip命令 传zip到linux并解压
后端计算机程序设计设置FTP传输软件xftp默认打
后端计算机编程语言有哪些Java实现Linux grep命
后端趣味编程linux安装mysql5.7
后端儿童编程学习linux入门系列8--shell编程入门

工具资源

更多 >