idが可視であるか隠されているかを調べる

Question

上記のDiv要素を隠すと、なぜこの条件が満たされないのかわかりません。 div idがvisibleと等しいかどうかを書き留めて、ユーザーに「コンテンツが表示されている」と警告する方法を見つけようとしています。 「可視」私のdiv idが隠し等しい場合、ユーザー「隠されたコンテンツ」

//document.getElementById("myDiv").style.visibility = "visible"; 
 
document.getElementById("myDiv").style.visibility = "visible"; 
 

 
var status = document.getElementById("myDiv").style.visibility; 
 

 

 
if($("#myDiv").is(":visible") == true){ 
 
    alert("visible JQuery"); 
 
} 
 

 
if (document.getElementById("myDiv").style.visibility === "hidden") 
 
{ 
 
    alert("visible JS"); 
 
} 
 

 
alert(status);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="myDiv">Hello</div>

=まだブラウザでスペースを占有し、そうjQueryのは、として報告「隠れた」

Answer 1

可視性を警告します。 style.display = 'none'を実行した場合、jQueryの可視チェックは起動しません。

Answer 2

可視性：hiddenまたはopacity：0の要素は、まだレイアウト内のスペースを消費するため、表示可能と見なされます。

jQuery :visible

:visibleセレクタは、専用属性displayのために動作します。あなたは何ができるか

は次のとおりです。

if ($("#myDiv").css("visibility") == "hidden") { 
    // do something when hidden ... 
} 

Answer 3

これは私のために働くようだ：

document.getElementById("myDiv").style.visibility = "visible"; 
document.getElementById("myDiv").style.visibility = "hidden"; 

if($("#myDiv").css("visibility") !== "hidden") { 
    alert("visible JQuery"); 
} 

if (document.getElementById("myDiv").style.visibility === "hidden") { 
    alert("hidden JS"); 
} 

Codepen：

https://codepen.io/foozie3moons/pen/OxgomO

EDIT 可視性を可視に設定していないかのように、私の応答を更新しました。