Div открывается по 2х клику

197
05 октября 2021, 03:00

У меня есть код:

<div class="car">car</div> <button onclick="f1()">Close/Open</button>

function f1() {
    var a = document.getElementsByClassName("car")[0];
    display = a.style.display;
    if (display == "none") {
        a.style.display = "block";
    } else {
        a.style.display = "none";
    }
}

В css я прописал .car{ display: none;} По этому див car открывается только со 2-го раза, я конечно знаю что можно в html сразу в тег задать style="display: none" но в моей ситуации сделать это я не могу, (делаю проект в котором при большом экране див открыт а при маленьком закрыт и можно его открыть только с помощью нажатия на кнопку) Буду благодарен за ответ.

Answer 1
var style = window.getComputedStyle(a);
a.style.display = style.display == "none"? "block" : "none";

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 2

Можно добавить второй класс-невидимку, и при клике переключать его.

let car = document.querySelector('.car'); 
let btn = document.getElementById('btn'); 
 
btn.addEventListener('click', function(){ 
  car.classList.toggle('invis'); 
});
.invis { display: none; }
<button id="btn">Close/Open</button> 
<div class="car invis">car</div>

READ ALSO
AJAX передает пустой $_POST
javascript

AJAX передает пустой $_POST

Всем доброго дня!

 180
Обработчик Javascript
javascript

Обработчик Javascript

Господа, подскажите где почитать реализацию идеи:

 145
Правильно ли использовать display для меню?
javascript

Правильно ли использовать display для меню?

Простой и краткий вопрос, правильно ли для реального сайта использовать для закрытия и открытия меню dislay: block/none корректно это или нужно делать...

 359
C# WPF Как изменить Width или Height окна когда WindowState.Maximized?
c#

C# WPF Как изменить Width или Height окна когда WindowState.Maximized?

Собственно как изменить Width или Height окна когда WindowStateMaximized? У меня ничего не происходит

 240