如何使用JavaScript操作DOM并修改CSS的颜色与背景色？

你的代码逻辑框架没问题，但创建的<div>没有内容，导致设置的样式无法直观显示。下面是优化后的代码，以及几种常用的样式修改方案：

1. 修复原始代码 #

给<div>添加文本内容，就能看到红色文字和蓝色背景的效果了：

const container = document.body;
container.append('you attach the append to the body first ');
const div = document.createElement('div');
div.textContent = '这是测试内容'; // 添加可见内容
div.style.cssText = 'color: red; background-color: blue; padding: 8px;'; // 增加padding让样式更明显
container.append(div);

2. 单独设置style属性 #

如果只修改少量样式，直接通过元素的style属性单独设置更清晰，注意CSS属性名要转为驼峰命名：

const div = document.createElement('div');
div.textContent = '单独设置样式';
div.style.color = 'red';
div.style.backgroundColor = 'blue'; // 对应CSS的background-color
div.style.padding = '8px';
document.body.append(div);

3. 通过CSS类控制样式（推荐） #

如果样式复杂或需要复用，先定义CSS类，再用JS给元素添加类名，是更规范的做法：

/* 提前在样式表中定义类 */
.custom-style {
  color: red;
  background-color: blue;
  padding: 8px;
}

const div = document.createElement('div');
div.textContent = '通过类设置样式';
div.classList.add('custom-style'); // 添加类名
document.body.append(div);

关键提示 #

• 使用style属性时，CSS短横线属性要转为驼峰（如background-color → backgroundColor）
• cssText会覆盖元素原有的行内样式，使用时需注意
• 元素必须有内容或设置宽高，才能显示背景色效果

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