0

我有一个元素，我使用 Javacsript 动态更改颜色样式。id#clock和 id#quantity设置颜色。当条件发生变化时，我通过添加一个类来使用 Javacsript 更改颜色样式。当条件变回时，我删除了这个类。但是，问题是在删除类之后，被删除类的颜色样式仍然存在，而不是前 2 个 id 样式的颜色。

我可以通过删除 id 并使用 Javascript 动态重新应用它们来解决这个问题。但是，我想知道是否有更有效的解决方案？

<div id="clock">
    <div id="top-gradient"></div>
    <div id="time">
        <span id="zen9" class="quantity"></span> 
    </div>
    <div class="zentext">Server Monitor</div> 
</div>

Javascript：

bar = document.getElementById(id);
etop = bar.parentNode.parentElement;
ebottom = bar.parentNode.previousElementSibling;
etext = bar.parentNode.parentNode.childNodes[5];
if ( value >= threshold[id] && !(bar.classList.contains("zenRed"))) {
    bar.classList.add("redZen");
    etop.classList.add("redZenTop");
    ebottom.classList.add("redZenBottom");
    etext.classList.add("redZenText");
} else if ( value < threshold[id] && (bar.classList.contains("zenRed"))) {
    bar.classList.remove("redZen");
    etop.classList.remove("redZenTop");
    ebottom.classList.remove("redZenBottom");
    etext.classList.remove("redZenText");
}
4

1 回答 1

0

你真的没有给我们太多的信息。但是我知道您想在一个条件下添加一个类并在一个条件下删除相同的类。

首先，没有 ID 为 #quantity 的元素，它是一个类。

无论如何，使用classList的切换功能，您可以添加删除类，具体取决于它是否已分配。

你在寻找这样的东西吗？

var bar =  document.getElementById('clock');
var foo =  document.getElementById('time');

bar.classList.toggle('redZen');
foo.classList.toggle('pinkZen');

jsFiddle

于 2013-10-09T17:28:26.443 回答