当我用 js 编辑它时，背景不会改变答案

【问题标题】：background doesn't change when i edit it with js当我用 js 编辑它时，背景不会改变
【发布时间】：2022-11-29 21:00:23
【问题描述】：

当我使用 js 从 div 更改背景颜色时，它会在我的网站上更改它。当我检查时，我看到 css 被内联添加，但它确实发生了变化这是我在 js 文件中用来更改背景颜色的代码我也在这个文件中制作了div 我还必须使用 js 和 setattribute，因为它用于学校任务这是整个js文件

const div=document.createElement("div")
const h3=document.createElement("h3")
document.querySelector("main").appendChild(div)
div.appendChild(h3)
h3.innerHTML="Status"
div.id="status"

在这里我启动 div

document.getElementById("status").addEventListener("mouseover", () => document.getElementById("status").setAttribute("style", "background-color:black;"));
document.getElementById("status").addEventListener("mouseout", () => document.getElementById("status").removeAttribute("style"));

在这里我尝试改变背景颜色

<!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>

*{
    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;
}

【问题讨论】：

div 来自哪里？
不确定 setAttribute 是否是一个好的选择，试试 div.style.backgroundColor = 'black' 代替。（如果你想再次删除它，请设置 transparent。）顺便说一句，为什么要使用 JS 来开始真正而不是 CSS 的工作？
它用于学校练习，所以我必须用 setattribute 和 js 这样做
您需要发布一个最小的可重现示例，因为这只是一个需要通读的大杂烩。
@WietseGijbels 你能添加相关的html代码吗？ main 来自哪里？

标签： javascript html sass

【解决方案1】：

根据您的代码，我们没有看到 div 来自哪里。

如果我们定义一个元素并将其分配给div，它就可以工作，下面是一个简单的参考

let div = document.getElementById("status")
div.addEventListener("mouseover", () => div.setAttribute("style", "background-color:black;color:white"));
div.addEventListener("mouseout", () => div.removeAttribute("style"));

&lt;div id="status"&gt;Change Background Color&lt;/div&gt;

更新：基于 OP 的新代码

const div=document.createElement("div")
const h3=document.createElement("h3")
document.querySelector("main").appendChild(div)
div.appendChild(h3)
h3.innerHTML="Status"
div.id="status"

let divEle = document.getElementById("status")
divEle.addEventListener("mouseover", () => divEle.setAttribute("style", "background-color:black;color:white"));
divEle.addEventListener("mouseout", () => divEle.removeAttribute("style"));

<main>
</main>

【讨论】：

当我检查网站并将鼠标悬停在 div 上时仍然遇到同样的问题，看到这个 <div id="status" style="background-color:black;"
@WietseGijbels 您需要发布一个最小的可重现示例，以便其他人可以帮助您分析它
这是你的意思吗
@WietseGijbels 我已经更新了我的答案，您可以再次查看。
当我检查时它仍然显示为内联但它没有改变我的一些 sass 的这个 bc 是否正在覆盖 js 或者应该不会出现问题

【解决方案2】：

我真的不知道您当前的代码在这里发生了什么，但是我写了以下内容以获得所需的结果。

const div = document.createElement("div")

var body = document.getElementById("main")
body.appendChild(div)
div.setAttribute("id", "status");

let divSelect = document.getElementById("main")
divSelect.addEventListener("mouseover", () => div.setAttribute("style", "background-color:black;color:white"));
divSelect.addEventListener("mouseout", () => div.removeAttribute("style"));

#status {
  width: 200px;
  height: 25px;
  border: 1px solid black;
}

&lt;div id="main"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

我测试了你的代码。我猜问题出在 document.querySelector("main").appendChild(div) 行，正如您在控制台中看到的错误，如果您的意思是“main”是一个带有“main”类的 div，您应该使用“.main”来引用它，或者如果 main是 id，“#main”，它工作正常。

【讨论】：