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 Core method 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和所有其他网址属性相对于文档都会被绝对化; tabIndex和其他数字属性返回Number而不是文字字符串; onclick和其他事件处理程序属性返回一个JS Function对象，以及名称恰好与class等常见保留字冲突的属性（不只是JavaScript保留字，因为DOM是跨语言标准）重命名（另请参阅：htmlFor），非标准属性根本无法作为属性访问。其他问题：输入中的value / selected / checked反映了表单字段的当前内容;同名的属性是defaultValue / defaultSelected / defaultChecked初始值。

[旁白：IE＆lt; 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

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

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

4 个答案: