使用 Javascript 的 CSS 样式属性值无效

Question

我正在尝试使用 Javascript 创建元素并设置其样式：

var div_html = document.createElement("div");
var div = document.createElement("div");
div.setAttribute("class", "div_class");
div.style.height = 50 + "px";
div_html.appendChild(div);
document.body.innerHTML = div_html.innerHTML;

.div_class {
width: 200px;
background-color: black;
}

现在这个代码片段在这里可以工作，但是对于我的代码，当我在浏览器上加载它时，

div.style.height = 50 + "px";

css 样式未应用，即在开发人员工具中它们被划掉并显示“无效的属性值”。鉴于它在这里有效，我不认为我的 css 样式的语法是错误的。

此外，我在同一个 js 文件中也有代码，这些代码基本上在进一步执行完全相同的操作，并且工作正常。我能看到的唯一区别是，在有效的块中，我将 div 创建为数组中的元素，而在本例中它只是一个变量。

我尝试重写代码如下：

document.body.innerHTML = '<div class="div_class" style="height: 50px"></div>';

.div_class {
width: 200px;
background-color: black;
}

同样，这在这里可以工作，但是当我在浏览器上加载它时，我遇到了与以前完全相同的问题。

Answer 1

使用：

div.setAttribute("className", "div_class");

或

div.classList.add("div_class");