HTML 标记属性和 jquery 中的驼峰式大小写 - 不起作用，为什么？答案

【问题标题】：Camel case in HTML tag attributes and jquery - doesn't work, why?HTML 标记属性和 jquery 中的驼峰式大小写 - 不起作用，为什么？
【发布时间】：2016-07-10 15:27:05
【问题描述】：

是的，有类似的问题，但它们是关于 jquery 添加小写属性的，如下所示：Does the attr() in jQuery force lowercase?

但我有不同的情况。这是我的 HTML5 代码：

<tr class='projectRow' data-projectId='34'>

注意这是驼峰式。现在这段代码不起作用：

//"this" points to a child element
$id = $(this).closest('.projectRow').data('projectId');//undefined

但是如果我把它变成小写：

$(this).closest('.projectRow').data('projectid');

有效。

当我查看源代码时，它显然是“projectId”（camelCase），但是当在 chrome -> dev tools -> elements 中时，它是“projectid”（小写）o_O

难怪jquery不能得到这个值，但是为什么Chrome会这样做呢？我之前做过数百次类似的事情，虽然在“project-id”中使用了-like，现在经过这么多年制作Web应用程序后，我发现了类似的东西o_O

【问题讨论】：

data 属性（连同最佳实践中的所有属性名称）应该小写，否则会干扰 jQuery 将它们存储在缓存中的方式。
好的，但是为什么 Chrome 会这样做呢？
@RoryMcCrossan 如果您有兴趣，这不仅是 jquery 的问题，实际上我正在破坏规范：w3.org/TR/html5/…*-attributes
谢谢，我知道 jQuery 不喜欢大小写混合的数据属性，但没有意识到它们在规范中是小写的。

标签： javascript jquery html

【解决方案1】：

编辑

HTML spec 状态属性名称不区分大小写，这意味着将它们全部写成大写与将它们全部写成小写或驼峰式一样好：

HTML 元素的属性名称可以用任何大小写字母组合编写，不区分大小写匹配在此的 HTML 元素部分中给出的属性的名称文档;也就是说，属性名称不区分大小写。

编辑#2

Another part of the spec 更明确地声明：

HTML 文档中 HTML 元素上的所有属性名称 ASCII 自动小写，因此对 ASCII 大写的限制信件不影响此类文件。

原答案

jQuery 指定，如果你想通过 camelCase 访问属性，那么将它们连字符，这样：

data-project-id="1" 通过$(element).data('projectId'); 访问

【讨论】：

好的，我会简单地使用小写字母，但为什么 Chrome 会这样做呢？这是在 HTML5 规范中，属性必须是小写的吗？我找不到它。
所以...这意味着 Chrome 应该不将它们设为小写...对吗？
好吧，没关系，我的理解是，由于 HTML 不关心大小写，Chrome 不应该以任何方式“修复”它，而恰恰相反。
Adam：实际上我违反了规范：w3.org/TR/html5/…*-attributes
SO 断开了我的链接，如果有人感兴趣，那就是 #3.2.5.9 顺便说一句 - 这是恕我直言的错误，URL 中允许使用星号，因此会切断 URL在这个角色上。有没有地方可以提交与 SO 相关的错误？

【解决方案2】：

你可以使用“.attr()”来访问属性的值，而不是使用“.data()”，然后你可以通过你给它的名字来引用它；像下面这样：

$(element).attr('data-projectId');

【讨论】：