JS通过setAttribute修改div背景色不生效问题求助

通过JavaScript创建id为status的div元素，并为其绑定mouseover和mouseout事件：

• 鼠标悬停时调用setAttribute设置style属性为background-color:black
• 鼠标移出时调用removeAttribute移除style属性

浏览器开发者工具显示内联样式已成功添加，但页面上div的背景色并未发生变化。

相关代码 #

JavaScript代码

// 创建元素的代码
const div=document.createElement("div")
const h3=document.createElement("h3")
document.querySelector("main").appendChild(div)
div.appendChild(h3)
h3.innerHTML="Status"
div.id="status"

// 事件绑定代码
document.getElementById("status").addEventListener("mouseover", () => document.getElementById("status").setAttribute("style", "background-color:black;"));
document.getElementById("status").addEventListener("mouseout", () => document.getElementById("status").removeAttribute("style"));

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Games</title>
    <link type="text/css" href="styles/style.css" rel="stylesheet" />
    <script tpye="text/javascript" src="js/dom.js" defer></script>
    <script type="text/javascript" src="js/table-overview.js" defer></script>
  </head>
  <body>
    <header>
      <img src="images/logo.jpg" alt="Logo image of games" class="logo" />
      <nav>
        <ul>
          <li class="actual">
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="overview.html">Overview</a>
          </li>
          <li><a href="table-overview.html">Table overview</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>My Games</h2>
    </main>
    <footer>Wietse Gijbels: Front-end - 2022</footer>
  </body>
</html>

CSS代码

*{
    background-color: #00004f;
    color: #fff;
    text-align: center;
    max-width: 800px;
    margin: auto;
}

h2{
    margin: 2em 0 ;
}

h3{
    margin: 3em 0 1.5em 0
}

p{
    margin: auto;
    margin-bottom: 10px;
}

footer{
    margin-top: 2em;
    background-color: #000083;
    padding: 10px 0;
    border-radius: 10px;
}

问题根源在于CSS的全局*选择器：该选择器给所有元素设置了background-color: #00004f，包括div内部的h3标签。当div通过内联样式设置黑色背景后，内部的h3元素会继承全局选择器的背景色，完全覆盖div的黑色背景，导致视觉上看不到div的背景变化。

方案1：调整全局选择器的作用范围 #

将全局*选择器的background-color属性移至body选择器，仅给页面主体设置背景色，避免影响内部元素：

body{
    background-color: #00004f;
    color: #fff;
    text-align: center;
    max-width: 800px;
    margin: auto;
}

/* 其他样式保持不变 */
h2{
    margin: 2em 0 ;
}

h3{
    margin: 3em 0 1.5em 0
}

p{
    margin: auto;
    margin-bottom: 10px;
}

footer{
    margin-top: 2em;
    background-color: #000083;
    padding: 10px 0;
    border-radius: 10px;
}

方案2：给目标div的内部h3设置透明背景 #

如果不想修改全局选择器，可以为#status下的h3设置透明背景，让div的背景色显示出来：

#status h3{
    background-color: transparent;
}

方案3：直接操作style对象（更推荐的JS写法） #

虽然问题根源在CSS，但修改元素样式更推荐直接操作DOM元素的style对象，而非使用setAttribute，这种方式更直观且不易引发样式冲突：

// 提前获取元素，避免重复查询DOM
const statusDiv = document.getElementById("status");

statusDiv.addEventListener("mouseover", () => {
    statusDiv.style.backgroundColor = "black";
});

statusDiv.addEventListener("mouseout", () => {
    statusDiv.style.backgroundColor = "";
});

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