Question

我有一个元素，我用Javacsript动态更改颜色样式。标识#clock和标识#quantity设置颜色。当条件改变时，我通过添加类来改变Javacsript的颜色样式。当条件变回时，我删除了该类。但是，问题是在删除类之后，删除的类的颜色样式仍然是前两个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");
}

Answer 1

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

首先，没有任何元素具有id #quantity，它是一个类。

无论如何，使用classList的切换功能，你可以添加删除类，具体取决于它是否已经被赋予。

你在找这样的东西吗？

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

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

<强> jsFiddle

使用Javascript删除类后，CSS3颜色样式仍然存在

1 个答案: