web-dev-qa-db-ja.com

要素が表示されているかどうかを確認する（JavaScript）

私はdivが表示されているかどうかを判断し、その変数を使用してさまざまなプロセスを実行するJavaScript関数を持っています。要素の表示をnoneとblockの間で変更することで、要素の可視性をうまく切り替えることができます。この値は保存できません...

要素の表示属性値を取得して、要素IDが表示されているかどうかを確認しましたが、どちらも機能しませんでした。 .getAttributeを実行すると、常にnullが返されます。 idが定義されていて、display属性があるため、理由はわかりません。

ここに私が試した2つの異なる方法のコードがあります：

var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");

ガイダンスや支援をいただければ幸いです。

javascriptjquerydomvisiblegetattribute
9
Devon Bernard

ディスプレイは属性ではなく、style属性内のCSSプロパティです。

あなたが探している可能性があります

var myvar = document.getElementById("mydivID").style.display;

または

var myvar = $("#mydivID").css('display');
10
SeinopSys

このようにしてみてください：

$(function () {
    // Handler for .ready() called.
    if ($("#mydivID").is(":visible")) {
        alert('Element is visible');
    }
});

[〜＃〜]フィドル[〜＃〜]

次のように、headタグ内にjQueryファイルを必ず含めてください

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
18
palaѕн

あなたがこれをやりたいのはあなただけのJavaScriptの方法だけです

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
8
Gaurav

少し時間を取って、.is(":visible")がjQueryで何をしているのか見てみましょうか。

ここにリンクがあります： https://github.com/jquery/jquery/blob/master/src/css.js#L529

return !jQuery.expr.filters.hidden( elem );

どこ

jQuery.expr.filters.hidden = function( elem ) {
    // Support: Opera <= 12.12
    // Opera reports offsetWidths and offsetHeights less than zero on some elements
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};

つまり、要素のオフセット幅と高さをチェックしているだけです。

つまり、jQueryが要素がhiddenであるかどうかを確認するときにチェックするとき（つまり、「トグル」イベントをトリガーするときのように）、それはdisplay propertyとそのdom内の存在。 https://github.com/jquery/jquery/blob/master/src/css.js#L4

7
Nirvana Tikku