Question

我已经和这个问题坐了2个小时。我想要制作的是一个网站，你按下一个按钮就可以改变颜色。我知道这可以用CSS完成，但我对此并不感兴趣。

主要问题是，当我按下按钮时，没有任何反应..但是，如果我删除了＆＃39;来自CSS的#sug＆＃39;一切都很完美...所以我想做的是，在开始时使布局非常基本，所以除了黑色背景之外什么都没有，当我按下按钮时它应该切换。

此外，我知道您可以在按钮标记中实现onclick，但这不是我要去的地方。我想知道为什么会发生这种情况以及如何解决这个问题。

这是我的javascript，CSS和HTML代码：

＆＃13;

window.onload = setUp;

function setUp() {
  document.getElementById("normal").onclick = setNormalStyle;
  document.getElementById("crazy").onclick = setCoolStyle;
  document.getElementById("insane").onclick = setInsaneStyle;
}

function setNormalStyle() {
  var messageBox = document.getElementById("sug");
  messageBox.className = "normal";
}

function setCoolStyle() {
  var savingTheSecondVar = document.getElementById("sug");
  savingTheSecondVar.className = "cool";
}

function setInsaneStyle() {
  var savingTheThirdVar = document.getElementById("sug");
  savingTheThirdVar.className = "insane";
}

＆＃13;

#sug {
  background-color: black;
}
.normal {
  height: 500px;
  background-color: blue;
  color: white;
  padding: 30px;
  margin: auto;
  width: 500px;
}
.insane {
  height: 500px;
  background-color: green;
  padding: 30px;
  margin: auto;
  width: 500px;
  color: white;
}
.cool {
  height: 500px;
  background-color: red;
  padding: 30px;
  margin: auto;
  width: 500px;
  color: white;
}

＆＃13;

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <link type="text/css" rel="stylesheet" href="Struktur.css" />
  <script type="text/javascript" src="struktur.js"></script>
  <title>My first Javascript project</title>
</head>

<body>
  <div id="sug" class="cool insane normal">
    <header>
      <h1> Welcome to this Javascript site! </h1>
    </header>
    <section>
      <p>
        text
      </p>
    </section>
    <button type="button" id="normal">First style</button>
    <button type="button" id="crazy">Second style</button>
    <button type="button" id="insane">Third style</button>
  </div>
</body>

</html>

＆＃13;

Answer 1

问题是你的CSS。

#sug{
   background-color: black;
}

覆盖类的背景颜色，因为它是一个更具体的选择器（即一个id选择器）。

更改css中其余的类以包含类似

的ID

＃sug.normal，＃sug.insane，＃sug.cool等。

这是一篇关于CSS特性的好文章，可以帮助您了解更多：https://css-tricks.com/specifics-on-css-specificity/

Answer 2

那是因为id优先于某个类。您需要像这样指定：

#sug.cool { background: red; }

等

Answer 3

您没有删除按钮的CSS onClick（）事件中#sug id提供的背景颜色。 Id对类的偏好更多

使用下面的代码是一个好习惯，因为类之间有空格，如果你想添加多个类，可以使用它。

messageBox.className += " " + "normal";

我在使用Javascript时正在接管我的课程

3 个答案: