DOM 属性访问：为什么“elt.class”是不工作？

Question

我有这个 javascript 代码：

var elt = document.createElement("div");
elt.class = "class_1";

在我的 CSS 中应该有一个与 .class_1 相关的样式，但由于某种原因它并没有真正应用。花了几个小时弄清楚出了什么问题后，我尝试了这个替代方案：

elt.setAttribute("class", "class_1");

它起作用了......

这很奇怪，因为在我的代码的另一部分，我使用了 elt.id 并且它起作用了很好。起初我以为这是一个跨浏览器的问题，但事实证明 "elt.class" 并不能在所有浏览器中工作。

这是原生 javascript DOM 中的错误吗？有人可以解释为什么会这样或者我是否做错了什么？谢谢。所有意见/答案将不胜感激。

Answer 1

属性和属性是不同的东西。属性是您在文档代码中看到的字符串，任何类型的文档都可以通过 DOM 核心方法 getAttribute：

<a id="foo" href="bar" tabindex="1" onclick="alert()" class="bof" potato="lemon">

a.getAttribute('id')         // string "foo"
a.getAttribute('href')       // string "bar"
a.getAttribute('tabindex')   // string "1"
a.getAttribute('onclick')    // string "alert()"
a.getAttribute('class')      // string "bof"
a.getAttribute('potato')     // string "lemon"

而可直接在对象上访问的属性是专门化的且特定于文档类型（例如在 DOM HTML 或 HTML5），通常是更具可读性的便利设施。尽管它们通常反映与属性相同的事物，但它们在名称、值、类型或用途方面可能有所不同。

a.id                         // string "foo"
a.href                       // string "http://www.example.com/base/bar"
a.tabIndex                   // integer 1
a.onclick                    // function() { alert(); }
a.className                  // string "bof"
a.potato                     // undefined

因此，虽然 id 产生相同的值，但 href 和所有其他 URL 属性相对于文档而言是绝对化的； tabIndex 和其他数字属性返回数字而不是文字字符串； onclick 和其他事件处理程序属性返回一个 JS Function 对象，并且属性的名称恰好与常见的保留字（如 class）冲突（不仅仅是 JavaScript 保留字，如 DOM跨语言标准）被重命名（另请参阅：htmlFor），并且非标准属性根本无法作为属性访问。其他问题：输入中的value/selected/checked反映了表单字段的当前内容；同名的属性是 defaultValue/defaultSelected/defaultChecked 初始值。

[旁白：IE<8 确实很难区分属性和属性之间的差异，并且在它们不同的所有情况下都会为 getAttribute 返回错误的内容。不要让这让您感到困惑，并避免使用 getAttribute 来访问 HTML DOM 属性。]

Answer 2

“class”是 JavaScript 中的保留字，因此 DOM 使用 className 来反映元素的当前类。这以字符串形式表示。例如："foo bar baz"（具有 foo、bar 和 baz 类的元素）

参见 https://developer.mozilla.org/en/DOM/element.className 例如如何使用它。

Answer 3

var elt = document.createElement("div");
elt.className = "class_1";

Answer 4

类是保留字。要访问类属性，请使用 className。 elt.className = "class_1";