为什么类属性不能通过 javascript 分配内联？ [复制]答案

【问题标题】：Why class attribute cannot assign inline by javascript? [duplicate]为什么类属性不能通过 javascript 分配内联？ [复制]
【发布时间】：2013-09-08 19:30:51
【问题描述】：

<html>
  <head>
    <style>     
      .tagging {
        border: 1px solid black;
        width: 20px;
        height: 30px;
      }
    </style>
    <script>
      window.onload = function() {
        var div = document.getElementsByTagName("div");
        div[0].class = "tagging";
      }     
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

这是我的代码。我想知道为什么当我通过javascript分配类属性时它不起作用，但是当我直接在html中分配内联时它起作用

<div class="tagging"></div>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/element.className
Sine class 是许多语言中的保留关键字，DOM API 的创建者决定将class 属性映射到className 属性。在 JavaScript 中，这实际上并不重要，因为即使 class 是保留关键字，您也可以将此类关键字用作属性名称。

标签： javascript css

【解决方案1】：

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

然后：

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

【讨论】：

【解决方案2】：

您需要使用className。

试试：

div[0].className = "tagging";

如果你想将这个类添加到现有的类中，你可以使用：

div[0].className += " tagging"; // adding white-space is important

演示here

阅读： MDN className。

【讨论】：

【解决方案3】：

使用className，所以改变：

var div = document.getElementsByTagName("div");
div[0].class = "tagging";

到

var div = document.getElementsByTagName("div");
div[0].className = "tagging";

演示:: jsFiddle

【讨论】：