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 都是忽略大小写的。你要看很多年的网站,还会发现通篇标签全大写的呢。

原文地址:https://www.cnblogs.com/lxl57610/p/9095475.html

时间: 2024-10-11 07:36:09

HTML5 自定义属性 data-*属性名一定要小写吗?的相关文章

jquery的data()函数和html5的data属性

jquery的data()函数和html5的data属性:在html5中新增了一个自定义data属性,利用这个属性,可以添加任意的以"data-"开头的属性,这些属性不会再页面上显示,也不会影响任何原有的布局效果,并且此自定义属性是可读写的,例如: <div id="thediv" data-webname="蚂蚁部落">蚂蚁部落欢迎您</div> 以上代码就是使用自定义data属性的一个简单例子.可以使用jquery的d

html5中data属性,dataset与jquery中的date()

首先是“你必须知道的28个HTML5特征.窍门和技术”里对date属性的分析: 我们现在可以很正式地让所有的HTML元素支持自定义属性.然而,以前,我们可能会这样: <h1 id=someId customAttribute=value>你好,我是以前的自定义属性<h1> …校验器会小题大做!但是现在,只要我们以”data”为前缀定义我们的自定义属性,盗版属性立马变成正牌的了.如果你发现你曾经把一个重要的数据附加在诸如class的属性上,可能为了JavaScript之用,那么,本属

HTML5自定义data属性

可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role="header">     <h1>我是标题</h1> </div>  为什么写一个data-role="header"就能实现底部为黑色.文字居中显示的效果呢? 本文提供一种最简单的实现办法,让大家对这些用法有个直观的了解. 我们写

html5 data属性的使用

html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> data-* 属性用于存储页面或应用程序的私有自定义

HTML5自定义属性之data-

HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. <input type="button" value="按钮" data-index="10" data-index-color="red" > 在开始之前我们先来

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

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得data属性特别灵活,也非常强大.有了这样的属性我们能够更加有序直观的进行数据预设或存储.下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式. HTML5 Dataset 存储的例子 为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的

jQuery中使用data()方法读取HTML5自定义属性data-*实例

如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如下: 复制代码代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码代码如下: <div data-role =

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一.html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" data-id="2312">测试</a> 这里的data-

HTML5自定义属性对象Dataset简介

一.html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: 测试 这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置.数量不受限制,在控制和渲染数据的时候提供了非常强大的控制. 二.Dataset基础 下面是元素应用