最近学习 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-*属性名一定要小写吗?的更多相关文章

  1. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  2. js 获取html5的data属性

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...

  3. HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...

  4. 【转载】HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果:   [html]  <div data-role= ...

  5. 【JSON.NET】json序列化小驼峰格式(属性名首字母小写)

    废话少说,先上代码 var setting = new JsonSerializerSettings { ContractResolver = new Newtonsoft.Json.Serializ ...

  6. 【Newtonsoft.Json】json序列化小驼峰格式(属性名首字母小写)

    我是一名 ASP.NET 程序员,专注于 B/S 项目开发.累计文章阅读量超过一千万,我的博客主页地址:https://www.itsvse.com/blog_xzz.html 只需要设置JsonSe ...

  7. HTML5 data属性

    在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写,否则是undefinde 使用这样的 ...

  8. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

  9. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

随机推荐

  1. 《ucore lab1 exercise5》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:实现函数调用堆栈跟踪函数 我们需要在lab1中完成kdebug.c中函数print_stackframe的实现,可以通过函数print_s ...

  2. WAV文件读取

    WAV是一种以RIFF为基础的无压缩音频编码格式,该格式以Header.Format Chunk及Data Chunk三部分构成. 本文简要解析了各部分的构成要素,概述了如何使用C++对文件头进行解析 ...

  3. HTML table 表格边框

    一.总体思路: 1.表格无边框,背景颜色设置一种颜色(#DCDFE6),这样表格的边框的颜色就是表格的背景颜色: 2.单元格间距为1px,背景颜色设置为白色(#FFFFFF) // CSS table ...

  4. Django-04-路由系统

    1. 概述 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及 2. path转换器 在django2.0 以上的版本中,默认使用的是path转换器,我们首先以此 ...

  5. python之数据解构和算法进阶

    1.解压赋值多个变量 采用解构的方法.可迭代对象才可以,变量数量与元素个数要一一对应,或者采用*万能接收. 2.解压可迭代对象赋值多个变量 如果一个可迭代对象的元素个数超过变量个数时,会抛出一个 Va ...

  6. elasticsearch配置文件中http.cors.x字段有哪些用途和用法

    http.cors.enabled 是否支持跨域,默认为false http.cors.allow-origin 当设置允许跨域,默认为*,表示支持所有域名,如果我们只是允许某些网站能访问,那么可以使 ...

  7. Ambari深入学习(III)-开源使用及其改进思考

    Ambari采用的不是一个新的思想和架构,也不是完成了软件的新的革命,而是充分利用了一些已有的优秀开源软件,巧妙地把它们结合起来,使其在分布式环境中做到了集群式服务管理能力.监控能力.展示能力.这些优 ...

  8. 高性能Golang研讨会【精】

    by Dave Cheney 概观 本次研讨会的目标是为您提供诊断Go应用程序中的性能问题并进行修复所需的工具. 通过这一天,我们将从小工作 - 学习如何编写基准,然后分析一小段代码.然后走出去讨论执 ...

  9. React 语法

    1.JavaScript XML JSX = JavaScript XML,是一个看起来很像 XML 的 JavaScript 语法扩展.JSX 不是模板,是JS语法本身,有更多的扩展.JSX 组件一 ...

  10. centos7 install mysql5.7.27

    1.yum 安装 wget yum install wget 2.下载MySQL 的yum repo wget https://repo.mysql.com//mysql57-community-re ...