Question

推动＆＃34;改变＆＃34;按钮样式永远不会返回到声明的CSS样式（紫色为黑色） - ＆＃34; initial＆＃34;并且＆＃34;继承＆＃34;在这里表现得一样......

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  section {
    color: yellow;
    background-color: purple;
  }
  .demo {
    color: purple;
    background-color: black;
  }
</style>

<button id="change">Change</button>

<section>
  <p class="demo">Demo text</p>
  <button class="demo">demo button</button>
  <input class="demo" type="text" placeholer="demo field" />
</section>

<script>
  var flipColors = document.getElementById("change");
  var demoFlip = document.getElementsByClassName("demo");
  demoFlip.toggleStatus = "onColor";
  flipColors.onclick = function() {
    switch (demoFlip.toggleStatus) {
      case "onColor":
        demoFlip.toggleStatus = "flipColor";
        for (i = 0; i < demoFlip.length; i++) {
          demoFlip[i].style.color = "blue";
          demoFlip[i].style.backgroundColor = "yellow";
        }
        break;
      case "flipColor":
        demoFlip.toggleStatus = "off";
        for (i = 0; i < demoFlip.length; i++) {
          demoFlip[i].style.color = "yellow";
          demoFlip[i].style.backgroundColor = "blue";
        }
        break;
      case "off":
        demoFlip.toggleStatus = "onColor";
        for (i = 0; i < demoFlip.length; i++) {
          demoFlip[i].style.color = "inherit";
          demoFlip[i].style.backgroundColor = "inherit";
        }
        break;
    }
  }
</script>

＆＃13;

我应该在这里申报颜色吗？我知道这很简单，但我不知道我在这里错过了什么？

Answer 1

“继承”表示它将采用父级的定义值。在这种情况下，父母是紫色的黄色。因此，当开关处于“关闭”状态时，它将转为继承，因此它将转为部分值。

如果你想使用“继承”并且你想保持按原样设计的部分，你可以把东西包装在另一个容器中。

否则，您可以在“关闭”的情况下定义颜色。

我这样做的方法是为每个版本制作一个CSS类并添加/删除它。

功能代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  section {
    color: purple;
    background-color: black;
  }
  .demo {
    color: purple;
    background-color: black;
  }
</style>

<button id="change">Change</button>

<section>
  <p class="demo">Demo text</p>
  <button class="demo">demo button</button>
  <input class="demo" type="text" placeholer="demo field" />
</section>

<script>
  var flipColors = document.getElementById("change");
  var demoFlip = document.getElementsByClassName("demo");
  demoFlip.toggleStatus = "onColor";
  flipColors.onclick = function() {
    switch (demoFlip.toggleStatus) {
      case "onColor":
        demoFlip.toggleStatus = "flipColor";
        for (i = 0; i < demoFlip.length; i++) {
          demoFlip[i].style.color = "blue";
          demoFlip[i].style.backgroundColor = "yellow";
        }
        break;
      case "flipColor":
        demoFlip.toggleStatus = "off";
        for (i = 0; i < demoFlip.length; i++) {
          demoFlip[i].style.color = "yellow";
          demoFlip[i].style.backgroundColor = "blue";
        }
        break;
      case "off":
        demoFlip.toggleStatus = "onColor";
        for (i = 0; i < demoFlip.length; i++) {
          demoFlip[i].style.color = "inherit";
          demoFlip[i].style.backgroundColor = "inherit";
        }
        break;
    }
  }
</script>

继承和初始行为相同

1 个答案: