如何使用 getElementsByClassName 使用 JavaScript 更改 HTML 类 [重复]答案

【问题标题】：How to change an HTML class with JavaScript using getElementsByClassName [duplicate]如何使用 getElementsByClassName 使用 JavaScript 更改 HTML 类 [重复]
【发布时间】：2017-11-08 11:20:57
【问题描述】：

如何使用 Javascript 使用 getElementsByClassName 更改类。我让它工作了一点，但它不会改变当时的一类，赌注只做一次。

我单击按钮更改 css 类，它在所有 div 上执行此操作，我可以一次执行更多操作。

这是我的代码

function Button_Color(Show_This) {
    var x = document.getElementById("Color_box");
    var i;
    var Show_This;

    if (Show_This == 1)
    {
        var d = document.getElementsByClassName("id_blue");
        d[0].className = "hid";

        var o = document.getElementsByClassName("id_red");
        o[0].className = " uhid";
    }
    if (Show_This == 2) {

            var d = document.getElementsByClassName("id_blue");
        d[0].className = "hid";

        var o = document.getElementsByClassName("id_red");
        o[0].className = " uhid";
    }


}

这里有一个like，展示一下现在用html css js 的样子 https://jsfiddle.net/ee51o5h5/1/

我希望它仅在您单击小红色时显示红色，仅在单击小蓝色时显示蓝色。

我有阅读障碍，来自非英语国家，很抱歉错过了。

【问题讨论】：

只是谷歌'改变类纯js'

标签： javascript html getelementsbyclassname

【解决方案1】：

您只需要找到所需类中的所有元素，迭代它们并将它们的类更改为使它们颜色的类：

    if (Show_This == 1)
    {
        document.getElementsByClassName("box-color02").forEach(function(element){
        element.className = "box-size box-color01";});
    }
    if (Show_This == 2) 
    {
        document.getElementsByClassName("box-color01").forEach(function(element){
        element.className = "box-size box-color02";});
    }

【讨论】：

getElementsByClassName 返回一个 HTMLCollection，而不是单个元素。
你是对的，我添加了 forEach 迭代。
请把代码写的更清楚
NodeList 对象的 forEach 方法不属于任何 W3C 或 WHATWG 规范，因此没有得到很好的支持。通过删除初始类值（id_blue 和 id_red），这只会工作一次。
我将其更改为内部类，即制作颜色的类，现在每次都能正常工作。而对于forEach，这只是一个迭代的例子，他可以随心所欲地迭代。

【解决方案2】：

我试试这个：

<body>

    <section class="section-button-box">
        <div class="box-button box-color01" onClick="Button_Color(1);">
        </div>

        <div class="box-button box-color02" onClick="Button_Color(2);">
        </div>

    </section>

    <section class="section-color-box" id="Color_box">

        <div class="main-color id_blue">
            <div class="box-size box-color01">
            </div>
        </div>

        <div class="main-color id_red">
            <div class="box-size box-color02">
            </div>
        </div>

        <div class="main-color id_blue">
            <div class="box-size box-color01">
            </div>
        </div>

        <div class="main-color id_red">
              <div class="box-size box-color02">
              </div>
        </div>

    </section>

</body>

JS：

/*|  Blue box  |*/
    function Button_Color(Show_This) {
        var x = document.getElementById("Color_box");
        var i;
        var Show_This;
            var list = document.getElementsByClassName("main-color");
        for(var i = 0 ; i < list.length; i ++ ){
            if (Show_This == 1)
        {
                console.log(list[i].classList.contains("id_blue"));
            if(list[i].classList.contains("id_blue")){
                list[i].classList.add("uhid");
              list[i].classList.remove("hid");
            }
            if(list[i].classList.contains("id_red")){
                list[i].classList.add("hid");
              list[i].classList.remove("uhid");
            }
        }
        if (Show_This == 2) {
                console.log(list[i].classList.contains("id_blue"));
            if(list[i].classList.contains("id_blue")){
                list[i].classList.add("hid");
              list[i].classList.remove("uhid");
            }
            if(list[i].classList.contains("id_red")){
                list[i].classList.add("uhid");
              list[i].classList.remove("hid");
            }
        }
        }
    }

和CSS：

/*|  Button Box  |*/
.section-button-box{
    height:100px;
    width:100%;
    background-color:aqua;
}
.box-button{
    height:50px;
    width:50px;
    float:left;
}

/*|  Color Box  |*/
.section-color-box{
    height:300px;
    background-color:#c1c1c1;
    width:100%;
}
.box-size{
    height:100px;
    width:100px;
    float:left;
}
.box-color01{
    background-color:blue;
}
.box-color02{
    background-color:red;
}

.hid , .hid .box-size {
    height:0px;
    width:0px;
}
.uhid{
    height:100px;
    width:100px;
}

我在您的代码中添加了一些内容。希望能解决您的问题。

【讨论】：

这项工作非常感谢 m8。