如何使用 getElementsByClassName 将 HTML class 更改为 JavaScript

Question

如何使用 getElementsByClassName 将 class 更改为 Javascript。我让它工作了一点，但它不会改变 class 一次赌注只做一次。

我单击按钮更改 css class 它在所有 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";
    }


}

这里有一个点赞给你看看现在用 html css js 的样子 https://jsfiddle.net/ee51o5h5/1/

我希望它只有在你点击小红点时才显示红色，只有在你点击小蓝点时才显示蓝色。

我有阅读障碍，来自非英语国家，如有任何遗漏，我深表歉意。

Answer 1

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

    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";});
    }

Answer 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;
}

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

如何使用 getElementsByClassName 将 HTML class 更改为 JavaScript

How to change an HTML class with JavaScript using getElementsByClassName

javascript

html

getelementsbyclassname