如何使用JavaScript来改变多个元素的CSS

Question

我试图在选择后使用JavaScript来更改元素的背景颜色，并确保一次只有一个元素具有特定的背景颜色。 一旦用户选择了不同的元素，我希望选择的前一个元素被不同的背景颜色替换。 目前，我只能通过选择EACH元素来切换单个元素。 我需要能够选择一个元素并应用新的背景颜色，然后让JavaScript将以前活动元素的背景颜色更改为不同的颜色（少一点击）。

我想要做的是非常类似于现代导航栏或列表项目，其中一次只有一个元素是“活动的”并且具有与同一div，行等中的其他元素不同的背景颜色。

关于我的工作的注意事项我正在使用bootstrap，并且不希望在这个特定的项目中使用jQuery。

CSS：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            h4 {
                border: 1px solid black;
                border-radius: 8px;
                padding: 10px 2px 10px 2px;
                margin: 20px 20px 0px 20px;
                background-color: #F0F0F0;
                border-color: #F8F8F8;
                color: #505050;
                cursor: pointer;
            }

            .active {
                background-color: #99E6FF;
            }
        </style>
    </head>
</html>

HTML：

<div id="pTwoRowOne">
    <div class="row">
        <div class="col-md-4 row row-centered">
            <h4 id="techBio" class="test">Biology</h4>
        </div>
        <div class="col-md-4 row row-centered">
            <h4 id="techCart" class="test">Cartography</h4>
        </div>
        <div class="col-md-4 row row-centered">
            <h4 id="techChem" class="test">Chemistry</h4>
        </div>
    </div>
</div>

JavaScript的：

document.getElementById("techBio").onclick=function() {
    document.getElementById("techBio").classList.toggle('active');
}

document.getElementById("techCart").onclick=function() {
    document.getElementById("techCart").classList.toggle('active');
}

document.getElementById("techChem").onclick=function() {
    document.getElementById("techChem").classList.toggle('active');
}

这里可以看到一个例子： http ： //jsbin.com/fugogarove/1/edit？html，css，js，output

如果需要澄清，请告诉我。

Answer 1

是的，非常直截了当。

假设

你不是试图支持IE8，因为你正在使用classList
您可以将元素作为变量存放，而不是反复查询DOM。

例

JSBin

码

我重写了你的JavaScript，使它更干净一点，干了一点：

var techs = [].slice.call(document.querySelectorAll('#pTwoRowOne h4'));

function set_active(event) {
  techs.forEach(function(tech){
    if (event.target == tech) { return; }
    tech.classList.remove('active');
  });
  event.target.classList.toggle('active');
}

techs.forEach(function(item) {
  item.addEventListener('click', set_active);
});

一些解释

[].slice.call(document.querySelectorAll('#pTwoRowOne h4')); - 我们使用它来将NodeList的输出更改为Array 。 这允许我们以后使用forEach 。 querySelectorAll返回一个NodeList ，其中包含与CSS选择器匹配的所有元素。 您可以使用更好的CSS选择器替换它，具体取决于您的环境。

addEventListener是一种比迭代添加通过onclick +=更好的方式来绑定事件监听器。 这也是ECMA5及更高版本中推荐的方式（据我所知）。

通过将元素查询设置为变量，您将能够将引用保留在内存中，而不是每次轮询DOM以更改元素。 这将使你的JavaScript略微加快，它再次只是它产生的更好，更清晰的代码版本。

更新

我重新设计了JS以使其更有意义。

Answer 2

假设你只有一个活动元素，你可以使用document.querySelector()找到它 - 如果你可以有多个，你可以使用document.querySelectorAll()并迭代它们。

简单案例：

 function activate(event) { var active=document.querySelector('.active'); // activate the clicked element (even if it was already active) event.target.classList.add('active'); // deactivate the previously-active element (even if it was the clicked one => toggle) if (active) active.classList.remove('active'); } document.getElementById("techBio").addEventListener("click",activate); document.getElementById("techCart").addEventListener("click",activate); document.getElementById("techChem").addEventListener("click",activate);

 h4 { border: 1px solid black; border-radius: 8px; padding: 10px 2px 10px 2px; margin: 20px 20px 0px 20px; background-color: #F0F0F0; border-color: #F8F8F8; color: #505050; cursor: pointer; } .active { background-color: #99E6FF; }

 <div id="pTwoRowOne"> <div class="row"> <div class="col-md-4 row row-centered"> <h4 id="techBio" class="test">Biology</h4> </div> <div class="col-md-4 row row-centered"> <h4 id="techCart" class="test">Cartography</h4> </div> <div class="col-md-4 row row-centered"> <h4 id="techChem" class="test">Chemistry</h4> </div> </div> </div>

Answer 3

你可以这样做：

[].slice.call(document.querySelectorAll(".test")).forEach(function(element) {
  element.addEventListener('click', function(event) {
    if (activeElement = document.querySelector(".test.active")) {
      activeElement.classList.remove("active");
    };
    event.target.classList.add('active');
  });
});

基本上，首先我们从活动元素中删除active类，然后将它添加到目标。

JSBin

Answer 4

另一种类似但更简单的方法： jsBin ;）

var H4 = document.getElementsByClassName("test"), act;

[].forEach.call(H4, function(el){
    el.addEventListener("click", function(){
       if(act) act.classList.remove("active");
       return (this.classList.toggle("active"), act=this);
    });
});

如何使用JavaScript来改变多个元素的CSS

问题描述

4 个解决方案

解决方案1
4 2015-06-02 20:07:28

解决方案2
3 2015-06-02 20:19:45

解决方案3
1 2015-06-02 20:26:54

解决方案4
1 已采纳 2015-06-02 20:49:41

如何使用JavaScript来改变多个元素的CSS

问题描述

4 个解决方案

解决方案1 4 2015-06-02 20:07:28

解决方案2 3 2015-06-02 20:19:45

解决方案3 1 2015-06-02 20:26:54

解决方案4 1 已采纳 2015-06-02 20:49:41

解决方案1
4 2015-06-02 20:07:28

解决方案2
3 2015-06-02 20:19:45

解决方案3
1 2015-06-02 20:26:54

解决方案4
1 已采纳 2015-06-02 20:49:41