JS创建DOM元素后CSS样式不生效的问题咨询

你的问题出在设置类名的方式错误，原生JS里用setAttribute操作元素类属性时，参数写错了：

错误原因 #

你写的是：

secondDiv.setAttribute("className","deux");

这里混淆了JS DOM对象的属性名和HTML元素的属性名：

• HTML元素的类属性是class（比如<div class="deux">）
• className是JS中DOM元素对象的属性名，用来映射HTML的class属性，并不是HTML属性本身

所以用setAttribute时，第一个参数必须是HTML属性名class，而非className。

两种正确的解决方法 #

1. 修正setAttribute的参数：

secondDiv.setAttribute("class", "deux");

2. 更推荐的写法（直接操作DOM对象的属性，更符合JS习惯）：

// 直接赋值类名（覆盖原有类名）
secondDiv.className = "deux";

// 或者用classList添加（适合需要保留原有类名的场景）
secondDiv.classList.add("deux");

内容的提问来源于stack exchange，提问作者aya