HTML5 自定义属性 data-*属性名一定要小写吗?
最近学习 javascript ,参考书籍是《 javascript 高级程序设计》第三版,在介绍自定义元素属性时书中给出了一个例子,如下:
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
理想情况下可以通过 myDiv.dataset.appId, myDiv.dataset.myname 访问数据,但是在实际测试的时候发现 appId 值为 undefined ,网上查了一下,说 HTML5 自定义属性不能包含大写字母,这种约束是不是不太合理?
如果我没记错的话,所有属性名都应该小写。
喔,忘了说,如果你要用 appId 访问,你应该写 data-app-id 。
没查,无责任猜测 data-app-id 在 dataset 里是 appId
所有标签属性,没有大小写区分,都是小写。 dataset 自动把 - 转换为驼峰。类似的还有 css 中的 style 属性,例如 background-color ,在 js 中对应 backgroundColor. 当然你会发现你要是执意要把 element.style.backgroundColor 写成 element.style['background-color'],在 chrome 中也是可以生效的,但没查证不知道是不是标准的 behavior. 总之遵循规范就是了,用 data-app-id, data-my-name 作属性, js 中直接 ele.dataset.appId 访问。除了某几个例如 id 之类的 attribute ,其他的非 dataset 的只能通过调用 setAttribute 或者 getAttribute 去访问。而且如前文所说 attribute 都是忽略大小写的。你要看很多年的网站,还会发现通篇标签全大写的呢。
HTML5 自定义属性 data-*属性名一定要小写吗?的更多相关文章
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- js 获取html5的data属性
我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...
- HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...
- 【转载】HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role= ...
- 【JSON.NET】json序列化小驼峰格式(属性名首字母小写)
废话少说,先上代码 var setting = new JsonSerializerSettings { ContractResolver = new Newtonsoft.Json.Serializ ...
- 【Newtonsoft.Json】json序列化小驼峰格式(属性名首字母小写)
我是一名 ASP.NET 程序员,专注于 B/S 项目开发.累计文章阅读量超过一千万,我的博客主页地址:https://www.itsvse.com/blog_xzz.html 只需要设置JsonSe ...
- HTML5 data属性
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写,否则是undefinde 使用这样的 ...
- HTML5 自定义属性 data-* 和 jQuery.data 详解
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...
- html5 data属性的使用
html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...
随机推荐
- 003 SpringBoot整合SpringMVC、Mybatis 案例
1.不使用骨架创建一个maven工程 2.修改POM.xml文件 <?xml version="1.0" encoding="UTF-8"?> &l ...
- spring data jpa碰到的坑
1.不能从别的类的repository那里 执行另一个类的sql,这样映射会失败. 2.有entity,就要有repository,并且还要有id注解 3.还要多表联查未测试,估计要用map去映射出来 ...
- C++和c语言的区别
在大家眼中c++与C语言很像,但两个有本质的区别,C语言是面向过程的,而C++是面向对象的,下面就给大家梳理梳理. 1.C语言有标准的函数库,它们松散的,只是把功能相同的函数放在一个头文件中:而C++ ...
- java枚举enum总结大全
1.注意点 (1)枚举中的构造方法必须是private的. (2)枚举中可以定义抽象方法和一般方法,但枚举对象必须实现所有抽象方法. (3)枚举对象必须放在第一行. package classTwo0 ...
- 浮动IP地址(Float IP)与 ARP欺骗技术
浮动IP地址: 一个网卡是可以添加多个IP的. 就是多个主机工作在 同一个集群中,即两台主机以上.每台机器除了自己的实IP外,会设置一个浮动IP,浮动IP与主机的服务(HTTP服务/邮箱服务)绑在一起 ...
- 笔记本用hdmi连接显示器后无法播放声音问题
打开控制面板的声音选项,把默认播放音频的设备设置成笔记本扬声器.这种方法直接利用笔记本扬声器
- java-Ehcache缓存
springmvc配置文件: <beans .... xmlns:cache="http://www.springframework.org/schema/cache" xs ...
- docker启动报错解决及分析(Cannot create container for service *******: cannot mount volume over existing file, file exists /var/lib/docker/overlay2/)
现象: Cannot create container for service *******: cannot mount volume over existing file, file exists ...
- python测试开发django-42.xadmin自定义菜单项
前言 xadmin后台的菜单项是放到一个app下的,并且里面的排序是按字母a-z排序,有时候我们需要划分多个项,需要自定义菜单列表,可以通过重写CommAdminView类实现.xadmin后台提供了 ...
- 【RocketMQ异常】Caused by: com.aliyun.openservices.shade.com.alibaba.rocketmq.client.exception.MQClientException: No route info of this topic, message-service-topic-testf
一.异常信息 -- ::-thread-] ERROR c.x.x.r.service.producer.ali.AliMQProducerProcess.sendMessageFromQueue(A ...