divにclickを表示するにはどうすればいいですか

Question

div要素があり、その表示をcssでnoneに設定しました。

var btnClick = document.getElementById("my-btn"); 
 

 
    btnClick.addEventListener("click", function() { 
 
\t var myDiv = document.getElementById("my-div"); 
 

 
\t if (myDiv.style.display == "none") { 
 
\t \t myDiv.style.display = "block"; 
 
\t } 
 
    else { 
 
\t \t \t myDiv.style.display = "none"; 
 
\t \t alert("here") 
 
\t } 
 
    });

#my-div { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
    display: none; 
 
    }

<div id="my-div"></div> 
 

 
<button id="my-btn">Click</button>

しかし、私は何も起こりません]ボタンをクリックしたとき：そして、私のmain.jsに、私はそうのようなボタンをクリックした後、私はブロックするように表示を変更したいファイル。

Answer 1

それは

var btnClick = document.getElementById("my-btn"); 

btnClick.addEventListener("click", function() { 
    var myDiv = document.getElementById("my-div"); 
    if (myDiv.style.display == "none") { 
     myDiv.style.display = "block"; 
    } 
    else{ 
     myDiv.style.display = "none"; 
    } 
}); 

Answer 2

条件myDiv.style.displayする必要がありますあなたのdivへのdisplayプロパティが存在しないとしてあなたは、myDiv.displayにあなたのコードに問題があったが、（それはstyleの財産です） - でもstyleあなたとdisplayプロパティにすぐにアクセスすることはできません。

element.style.Xを使用してCSSからスタイル定義を取得することはできません。

var btnClick = document.getElementById("my-btn"); 
 
btnClick.addEventListener("click", function() { 
 
    var myDiv = document.getElementById("my-div"); 
 
    if (myDiv.style.display == "none" || window.getComputedStyle(myDiv, null).getPropertyValue("display") == "none") { 
 
     myDiv.style.display = "block"; 
 
    } else { 
 
    myDiv.style.display = "none"; 
 
    } 
 
});

#my-div { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
    display: none; 
 
}

<div id="my-div"> 
 
</div> 
 

 
<button id="my-btn">Click</button>

そのようなもののために（jQueryのような）外部ライブラリを使用するための十分な理由があります：あなたがここにwindow.getComputedStyle(element, null).getPropertyValue

を使用する必要があり、そうするためには は一例です:)