JavaScriptで要素のCSS表示を確認する

要素のCSS display == blockまたはnoneJavaScriptを使用しているかどうかを確認することはできますか？

sdleihssirhcが以下に述べるように、要素displayがCSSルールによって継承または指定されている場合は、計算されたスタイルを取得する必要があります。

return getComputedStyle(element, null).display;

要素にはstyle、スタイルがインラインまたはJavaScriptで宣言されている場合に、必要な情報を提供するプロパティがあります。

console.log(document.getElementById('someIDThatExists').style.display);

文字列値を提供します。

スタイルがインラインまたはJavaScriptで宣言されている場合は、styleオブジェクトを取得するだけです。

return element.style.display === 'block';

それ以外の場合は、計算されたスタイルを取得する必要があり、ブラウザーに不整合があります。IEは単純なcurrentStyleオブジェクトを使用しますが、他のすべての人はメソッドを使用します。

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

これnullは、Firefoxバージョン3以下で必要でした。

jQueryの場合、このような意味ですか？

$('#object').css('display');

次のように確認できます。

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

この答えはあなたが望むものではありませんが、場合によっては役立つかもしれません。要素が表示されたときにいくつかの寸法があることがわかっている場合は、これも使用できます。

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

編集：これはCSS displayプロパティの直接チェックよりも優れているのはなぜですか？すべての親要素をチェックする必要がないためです。親要素にがある場合display: none、その子も非表示になりますが、まだありelement.style.display !== 'none'ます。

はい。

var displayValue = document.getElementById('yourid').style.display;

基本的なJavaScript：

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

プレーンなJavaScriptで表示されるかどうかを確認するには、displayプロパティが「none」であるかどうかを確認します（「block」を確認しないでください。空白または「インライン」であっても表示されている可能性があります）。

var isVisible = (elt.style.display != "none");

jQueryを使用している場合は、代わりにこれを使用できます。

var isVisible = $elt.is(":visible");

純粋なJavaScriptを使用すると、style.displayプロパティを確認できます。jQueryを使用すると、$('#id').css('display')

あなたはそれを例えばjQueryでチェックすることができます：

$("#elementID").css('display');

この要素の表示プロパティに関する情報を含む文字列を返します。