DOM属性访问:为什么是"elt.class"不工作

DOM attribute access: why is "elt.class" not working?

本文关键字：quot elt class 工作 属性 访问 为什么 DOM      更新时间：2023-09-26

我有这个javascript代码:

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

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

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

和它工作....

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

这是原生javascript DOM中的错误吗?谁能解释一下为什么会这样，或者我做错了什么吗?谢谢。

属性和属性是不同的东西。属性是您在文档代码中看到的字符串，可以通过DOM Core方法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函数对象，并且属性的名称恰好与class(不仅仅是JavaScript保留字，因为DOM是一种跨语言标准)等常见保留字冲突的属性将被重命名(参见:htmlFor)，并且非标准属性根本不能作为属性访问。value/selected/checked的输入反映了表单字段的当前内容;

相同名称的属性为defaultValue/defaultSelected/defaultChecked的初始值。

[旁白:IE<8在区分属性和属性之间的差异方面确实存在问题，并且在它们不同的所有情况下都会为getAttribute返回错误的东西。]请不要因此而困惑，并避免使用getAttribute访问HTML DOM属性[/p>

"class"在JavaScript中是保留字，所以DOM使用className来反映元素的当前类。这是以字符串形式表示的。例如:"foo bar baz"(包含foo、bar和baz类的元素)

请参阅https://developer.mozilla.org/en/DOM/element.className查看如何使用它的示例。
var elt = document.createElement("div");
elt.className = "class_1";

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

相关文章：