有时 object.setAttribute(attrib,value) 不等于 javascript 中的 object.attrib=value？答案

【问题标题】：Sometimes object.setAttribute(attrib,value) isn't equivalent to object.attrib=value in javascript?有时 object.setAttribute(attrib,value) 不等于 javascript 中的 object.attrib=value？
【发布时间】：2010-07-26 13:27:00
【问题描述】：

似乎有时 object.setAttribute(attrib,value) 不等同于 javascript 中的 object.attrib=value？

我有以下代码，可以正常工作：

var lastMonthBn = document.createElement('input');
lastMonthBn.value='<';     // This works fine
lastMonthBn.type='button'; // This works fine

但下面的代码没有：

var div = document.createElement('div');
div.class = 'datepickerdropdown'; // No luck here!

所以我需要使用以下内容：

div.setAttribute('class','datepickerdropdown');

我的问题是，为什么？通过阅读this，我认为 object.setAttribute(blah,value) 与 object.blah=value 相同？？

【问题讨论】：

标签： javascript dom

【解决方案1】：

属性和属性并不完全相同，但是 DOM 公开了标准 attributes through properties。

class 属性具体面临的问题是class 是future reserved word。

在某些实现中，使用将来的保留字可能会导致 SyntaxError 异常。

因此，HTMLElement DOM 接口提供了一种通过className 属性访问class 属性的方法：

var div = document.createElement('div');
div.className = 'datepickerdropdown';

请记住，属性与属性不同，例如：

想象一个如下所示的 DOM 元素：

<div></div>

如果您向其添加自定义属性，例如：

myDiv.setAttribute('attr', 'test');

一个属性将被添加到元素中：

<div attr="test"></div>

将attr 作为 div 元素的属性访问，只会得到undefined（因为它不是属性）。

myDiv.foo; // undefined

如果你将一个属性绑定到一个元素，例如：

myDiv.prop = "test";

getAttribute 方法将无法找到它，（因为不是属性）：

myDiv.getAttribute('test'); // null

_{注意： IE 错误地混淆了属性和属性。 :(}

正如我之前所说，DOM 将标准属性公开为属性，但您必须了解一些例外情况：

class 属性可通过className 属性访问（您遇到的问题）。
LABEL 元素的for 属性可通过htmlFor 属性访问（与for 语句冲突）。

属性不区分大小写，但 JavaScript 属性的语言绑定不区分大小写，因此约定是使用名称为camelCase 来通过属性访问属性，例如由两个单词组成的属性，例如cellSpacing、colSpan、rowSpan、tabIndex、maxLength、readOnlyframeBorder、useMap。

【讨论】：

非常感谢，这很有道理。在以这种方式访问属性时，我应该使用哪些关键字和大写字母？
@Chris，只有少数例外情况是公开的属性名称与属性名称不匹配，例如与for 语句保留字冲突的LABEL 元素的for 属性可通过htmlFor 属性访问。对于其他属性，例如由两个单词组成：cellSpacing、colSpan、rowSpan、tabIndex、frameBorder等。约定是使用“camelCase”，第一个字母小写，然后是第一个字母后面的单词大写。请记住，属性名称是不区分大小写的，但公开的属性名称不是。
+1，但我认为 IE 对属性和属性造成的混乱以及因此通常如何更好地使用属性可能会更加突出。我认为这是一个常见的混淆领域，jQuery 自己通过其定义不明确且具有误导性的 attr() 方法对此感到困惑。
@Tim，完全同意... jQuery 的attr 方法只是试图隐藏属性和属性之间的区别...

【解决方案2】：

需要注意的是，如果存在“class”或“int”等关键字，Safari 等浏览器将不会运行 JavaScript。

所以这是一种跨浏览器支持。 “类”存在于 JS2.0 [我相信那里也有一个包系统可用]

... 我还应该注意，在 IE 中，setAttribute [对于非类的东西，因为 setAttribute 应该可用于其他成员，例如“style”] 可能会出现故障。

【讨论】：