Блог

я хочу использовать 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 был «создан»??

какие альтернативы у меня есть??

Все дело в специфике CSS, идентификаторы более специфичны, чем классы, поэтому, даже если ваш элемент получает класс, стили недостаточно специфичны.

Измените стиль, чтобы включить идентификатор, и, конечно, если вы хотите увидеть изменение, сделайте элемент видимым

 #div1.fullview{

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

}
  

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

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

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

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

</script>