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- ...
随机推荐
- python:实现几种排序算法
冒泡排序 比较相邻两个字符,如果左边大于右边,则交换位置,遍历一遍字符后,则最大的肯定在最右边:继续循环处理剩下的字符(最右边的不用再比较了,已经最大了) 代码实现: def BubbleSort(s ...
- 在CAD中插入谷歌地球卫星地图
本文主要介绍如何在CAD中插入谷歌地球卫星地图,作为参照光栅图像.谷歌地球卫星地图使用“迈高图-地图数据下载器”(以下简称:迈高图)下载.迈高图会给出相关插入参数(插入点和缩放比例),保证插入卫星地图 ...
- 通过werkzeug了解wsgi
Django有wsgi当做socket,而flask自身是没有wsgi的,他是通过werkzeug来实现的. 看源码 下面看下源码是如何实现的: #这是我们写的flask代码from flask im ...
- c,使用lib,dll
lib使用: #include "xxx.h" // lib的头文件 #pragma comment(lib, "xxx.lib") 这样会将lib里的数据编译 ...
- CF468C Hack It! 构造
传送门 让人觉得脑子不够用的构造 考虑对于一个区间\([l,r]\)如何让它调整使得最后的结果恰好加上\(1\). 注意到对于一个\(<10^{18}\)的数\(x\),\(f(x+10^{18 ...
- AOP & 拦截器
https://www.cnblogs.com/boywwj/p/7502185.html spring aop中@after-returning和@after,@afterThrowing,@Aro ...
- 4、线程池(摘自C#高级编程第7版)
1.需求背景 创建线程需要时间.如果有不同的小任务完成,就可以事先创建许多线程,在应完成这些任务时发出请求.这个线程数最好在需要更多的线程时增加,在需要释放资源时减少. 2.线程池出场 不需要自己 ...
- Spring-Boot之Admin服务监控-9
一.Spring Boot Admin用于管理和监控一个或者多个Spring Boot程序.Spring Boot Admin分为Server端和Client 端,Client端可以通过向Http S ...
- 一 python并发编程之多进程
一 进程与程序 二 并发与并行 三 同步\异步和阻塞\非阻塞 四 进程的创建 五 进程的终止 六 进程的层次结构 七 进程的状态 八 进程并发的实现 一 进程与程序 什么是进程: 进程的概念:我们知道 ...
- vue动态加载不同的组件(分内部和外部组件)
<!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...