Question

我想使用javascript在类之间切换。我无法弄清楚为什么设置为display: none;的元素无法使用classList接收类。

换句话说，如果我说

    #div1{

        width: 25%;
        background-color: #000000;
        display: none;

    }

  #div2{

        width: 50%;
        height: 10px;
        background-color: #cccccc;


    }

    .fullview{

           width: 99%;
           height: 500px;
           border-radius: 5px;
           border: 1px solid #000000;


    }

带

<div  id="div1">
content here
</div>

<div  onclick="myFunction()" id="div2">
content here
</div>

<script>


function myFunction() {
         document.getElementById("div1").classList.toggle("fullview");
}
</script>

它不会给div1类fullview

但如果我切换它并将display:none;从div1移开并将其放在fullview类上，则脚本可以正常工作。但我不希望div1可见或保留空间直到点击div2

这是因为脚本已在div创建之前运行＆＃34; ??

我有什么替代品？

Answer 1

所有关于CSS的特异性，ID都比类更具体，所以即使你的元素得到了类，样式也不够具体。

更改样式以包含ID，当然，如果要查看更改，请使元素可见

#div1.fullview{

       width: 99%;
       height: 500px;
       border-radius: 5px;
       border: 1px solid #000000;
       display : block

}

＆＃13;

#div1 {
    width: 25%;
    background-color: #000000;
    display: none;
}

#div2 {
    width: 50%;
    height: 10px;
    background-color: #cccccc;
}

#div1.fullview {
    width: 99%;
    height: 500px;
    border-radius: 5px;
    border: 1px solid #000000;
    display: block;
}

＆＃13;

<div id="div1">
    content here
</div>

<div onclick="myFunction()" id="div2">
    content here
</div>

<script>
    function myFunction() {
        document.getElementById("div1").classList.toggle("fullview");
    }

</script>

＆＃13;

当元素设置为none

1 个答案: