要素がDOMに表示されるかどうかを確認します

要素が純粋なJS（jQueryではない）で表示されるかどうかを確認する方法はありますか？

たとえば、このページ：Performance Bikesで、（トップメニューの）[取引]にカーソルを合わせると、取引のウィンドウが表示されますが、最初は表示されませんでした。HTMLにはありますが、表示されません。

では、DOM要素が与えられた場合、それが表示されているかどうかをどのように確認できますか？私は試した：

window.getComputedStyle(my_element)['display']);

しかし、機能していないようです。どの属性をチェックすればよいのでしょうか。それは私の頭に浮かびます：

display !== 'none'
visibility !== 'hidden'

私が行方不明かもしれない他の何か？

このMDNドキュメントによれば、要素またはその親のいずれかが表示スタイルプロパティを介して非表示にoffsetParentなると、要素のプロパティが返さnullれます。要素が固定されていないことを確認してください。これを確認するスクリプトposition: fixed;は、ページに要素がない場合、次のようになります。

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

あなたは一方、行うこの検索に引っかかる可能性がある位置の固定要素を持っている、あなたは、悲しいことに（そしてゆっくり）を使用する必要がありますwindow.getComputedStyle()。その場合の関数は次のようになります。

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

オプション＃2は、エッジケースが多いため、おそらく少し単純ですが、かなり遅くなることもあるので、この操作を何度も繰り返す必要がある場合は、おそらく回避するのが最善です。

他のすべての解決策は、私にとって何らかの状況で壊れました。

優勝した解答を以下でご覧ください。

http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview

結局、私は最善の解決策を決定しました$(elem).is(':visible')-しかし、これは純粋なJavaScriptではありません。jqueryです。

だから私は彼らの情報源をのぞいて、私が欲しかったものを見つけた

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

これはソースです：https : //github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

ユーザーによる表示に興味がある場合：

function isVisible(elem) {
    if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
    const style = getComputedStyle(elem);
    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if (style.opacity < 0.1) return false;
    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
        y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
    };
    if (elemCenter.x < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y < 0) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === elem) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

テスト（モカ用語を使用）：

describe.only('visibility', function () {
    let div, visible, notVisible, inViewport, leftOfViewport, rightOfViewport, aboveViewport,
        belowViewport, notDisplayed, zeroOpacity, zIndex1, zIndex2;
    before(() => {
        div = document.createElement('div');
        document.querySelector('body').appendChild(div);
        div.appendChild(visible = document.createElement('div'));
        visible.style       = 'border: 1px solid black; margin: 5px; display: inline-block;';
        visible.textContent = 'visible';
        div.appendChild(inViewport = visible.cloneNode(false));
        inViewport.textContent = 'inViewport';
        div.appendChild(notDisplayed = visible.cloneNode(false));
        notDisplayed.style.display = 'none';
        notDisplayed.textContent   = 'notDisplayed';
        div.appendChild(notVisible = visible.cloneNode(false));
        notVisible.style.visibility = 'hidden';
        notVisible.textContent      = 'notVisible';
        div.appendChild(leftOfViewport = visible.cloneNode(false));
        leftOfViewport.style.position = 'absolute';
        leftOfViewport.style.right = '100000px';
        leftOfViewport.textContent = 'leftOfViewport';
        div.appendChild(rightOfViewport = leftOfViewport.cloneNode(false));
        rightOfViewport.style.right       = '0';
        rightOfViewport.style.left       = '100000px';
        rightOfViewport.textContent = 'rightOfViewport';
        div.appendChild(aboveViewport = leftOfViewport.cloneNode(false));
        aboveViewport.style.right       = '0';
        aboveViewport.style.bottom       = '100000px';
        aboveViewport.textContent = 'aboveViewport';
        div.appendChild(belowViewport = leftOfViewport.cloneNode(false));
        belowViewport.style.right       = '0';
        belowViewport.style.top       = '100000px';
        belowViewport.textContent = 'belowViewport';
        div.appendChild(zeroOpacity = visible.cloneNode(false));
        zeroOpacity.textContent   = 'zeroOpacity';
        zeroOpacity.style.opacity = '0';
        div.appendChild(zIndex1 = visible.cloneNode(false));
        zIndex1.textContent = 'zIndex1';
        zIndex1.style.position = 'absolute';
        zIndex1.style.left = zIndex1.style.top = zIndex1.style.width = zIndex1.style.height = '100px';
        zIndex1.style.zIndex = '1';
        div.appendChild(zIndex2 = zIndex1.cloneNode(false));
        zIndex2.textContent = 'zIndex2';
        zIndex2.style.left = zIndex2.style.top = '90px';
        zIndex2.style.width = zIndex2.style.height = '120px';
        zIndex2.style.backgroundColor = 'red';
        zIndex2.style.zIndex = '2';
    });
    after(() => {
        div.parentNode.removeChild(div);
    });
    it('isVisible = true', () => {
        expect(isVisible(div)).to.be.true;
        expect(isVisible(visible)).to.be.true;
        expect(isVisible(inViewport)).to.be.true;
        expect(isVisible(zIndex2)).to.be.true;
    });
    it('isVisible = false', () => {
        expect(isVisible(notDisplayed)).to.be.false;
        expect(isVisible(notVisible)).to.be.false;
        expect(isVisible(document.createElement('div'))).to.be.false;
        expect(isVisible(zIndex1)).to.be.false;
        expect(isVisible(zeroOpacity)).to.be.false;
        expect(isVisible(leftOfViewport)).to.be.false;
        expect(isVisible(rightOfViewport)).to.be.false;
        expect(isVisible(aboveViewport)).to.be.false;
        expect(isVisible(belowViewport)).to.be.false;
    });
});

これは役立つかもしれません： 要素を最も左端の位置に配置して要素を非表示にしてから、offsetLeftプロパティを確認します。jQueryを使用したい場合は、単に：visibleセレクターを確認して、要素の表示状態を取得できます。

HTML：

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

CSS：

<!-- for javaScript-->
#myDiv{
   position:absolute;
   left : -2000px;
}

<!-- for jQuery -->
#myDiv{
    visibility:hidden;
}

javaScript：

var myStyle = document.getElementById("myDiv").offsetLeft;

if(myStyle < 0){
     alert("Div is hidden!!");
}

jQuery：

if(  $("#MyElement").is(":visible") == true )
{  
     alert("Div is visible!!");        
}

jsFiddle

jQueryと同じコードを使用します。

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

したがって、関数では：

function isVisible(e) {
    return !!( e.offsetWidth || e.offsetHeight || e.getClientRects().length );
}

私のWin / IE10、Linux / Firefox.45、Linux / Chrome.52の魅力のように動作します...

jQueryなしのjQueryに感謝します！

上記のいくつかの答えを組み合わせる：

function isVisible (ele) {
    var style = window.getComputedStyle(ele);
    return  style.width !== "0" &&
    style.height !== "0" &&
    style.opacity !== "0" &&
    style.display!=='none' &&
    style.visibility!== 'hidden';
}

AlexZが言ったように、探しているものをより具体的に知っている場合、これは他のいくつかのオプションよりも遅くなる可能性がありますが、これは要素が非表示になる主な方法のすべてをキャッチするはずです。

しかし、それはあなたが目に見えるものとして数えるものにも依存します。たとえば、divの高さを0pxに設定できますが、コンテンツはオーバーフロープロパティに応じて引き続き表示されます。または、divのコンテンツを背景と同じ色にして、ユーザーには表示されないがページにレンダリングされるようにすることもできます。または、divを画面外に移動したり、他のdivの背後に隠したりすることもできます。あるいは、divのコンテンツを非表示にして、境界線を表示することもできます。ある程度「目に見える」とは主観的な用語です。

いくつかのエッジケースを無視しても構わない場合（コメントを確認）、「固定」要素の位置がある場合、AlexZのgetComputedStyle（）ソリューションよりもパフォーマンスの高いソリューションがあります。

function isVisible(el) {
    /* offsetParent would be null if display 'none' is set.
       However Chrome, IE and MS Edge returns offsetParent as null for elements
       with CSS position 'fixed'. So check whether the dimensions are zero.

       This check would be inaccurate if position is 'fixed' AND dimensions were
       intentionally set to zero. But..it is good enough for most cases.*/
    if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {
        return false;
    }
    return true;
}

補足：厳密に言うと、「可視性」を最初に定義する必要があります。私の場合、すべてのDOMメソッド/プロパティを問題なく実行できる限り、要素を表示することを検討しています（不透明度が0であるか、CSSの可視性プロパティが「非表示」であるなど）。

要素は通常表示されているが（display：blockおよびvisibillity：visible）、親コンテナが非表示になっている場合は、clientWidthおよびclientHeightを使用して確認できます。

function isVisible (ele) {
  return  ele.clientWidth !== 0 &&
    ele.clientHeight !== 0 &&
    ele.style.opacity !== 0 &&
    ele.style.visibility !== 'hidden';
}

プランカー（ここをクリック）

可視性を検出する基本的な方法を収集するだけであれば、忘れないでください。

opacity > 0.01; // probably more like .1 to actually be visible, but YMMV

そして、属性を取得する方法について：

element.getAttribute(attributename);

したがって、あなたの例では：

document.getElementById('snDealsPanel').getAttribute('visibility');

しかし、何ですか？ここでは機能しません。よく見ると、可視性が要素の属性としてではなく、styleプロパティを使用して更新されていることがわかります。これは、あなたがしていることをしようとする際の多くの問題の1つです。特に、要素の可視性、表示、不透明度がすべて正しい値であるという理由だけで、要素内に実際に何かがあることを保証することはできません。それでもコンテンツがないか、高さと幅が不足している可能性があります。別のオブジェクトがそれを不明瞭にする可能性があります。詳細については、Googleのクイック検索でこれが明らかになり、問題を解決するためのライブラリも含まれます。（YMMV）

強力なJohn Resigからの洞察を含む優れた回答を含む、この質問の重複の可能性がある以下をチェックしてください。ただし、特定のユースケースは標準のユースケースとは少し異なるため、フラグを立てないようにします。

• DOM要素が現在のビューポートに表示されているかどうかを確認するにはどうすればよいですか？
• 要素がJavaScriptで本当に表示されているかどうかを確認する方法は？

（編集：OPは、ページを作成しているのではなく、作成していると言います。以下は適用されません）より良いオプションですか？要素の可視性をモデルプロパティにバインドし、Angularがng-showで行うように、常に可視性をそのモデルに依存させます。これは、Angular、プレーンJSなど、必要なツールを使用して実行できます。さらに、DOM実装を時間の経過とともに変更できますが、DOMの代わりにモデルから常に状態を読み取ることができます。DOMから真実を読み取ることは悪いことです。そして遅い。モデルをチェックし、実装を信頼して、DOM状態がモデルを反映していることを確認することをお勧めします。（そして、自動化テストを使用してその仮定を確認します。）

受け入れられた答えは私にとってはうまくいきませんでした。2020年の回答：

1）（elem.offsetParent！== null）メソッドはFirefoxでは正常に機能しますが、Chromeでは機能しません。Chromeの場合、「位置：固定」また、ページに表示されている場合、offsetParentは要素であっても「null」を返します。

デモ：

//different results in Chrome and Firefox
console.log(document.querySelector('#hidden1').offsetParent); //null Chrome & Firefox
console.log(document.querySelector('#fixed1').offsetParent); //null in Chrome, not null in Firefox

    <div id="hidden1" style="display:none;"></div>
    <div id="fixed1" style="position:fixed;"></div>

この男のメガテストhttps://stackoverflow.com/a/11639664/4481831を見ることができます（違いを確認するには、複数のブラウザーで実行してください）。

2）（getComputedStyle（elem）.display！== 'none'）は機能しません。親の表示プロパティの1つがnoneに設定されているために要素が非表示になる可能性があるため、getComputedStyleはそれをキャッチしません。

デモ：

var child1 = document.querySelector('#child1');
console.log(getComputedStyle(child1).display);
//child will show "block" instead of "none"

<div id="parent1" style="display:none;">
  <div id="child1" style="display:block"></div>
</div>

3）（elem.clientHeight！== 0）。このメソッドは固定された位置の影響を受けず、要素の親が非表示かどうかもチェックします。しかし、CSSレイアウトを持たない単純な要素には問題があります。詳細はこちらを参照してください

デモ：

console.log(document.querySelector('#div1').clientHeight); //not zero
console.log(document.querySelector('#span1').clientHeight); //zero

<div id="div1">test1 div</div>
<span id="span1">test2 span</span>

4）前の3つのメソッドの問題を回避しているように見える（elem.getClientRects（）。length！== 0）。ただし、CSSトリック（「display：none」以外）を使用してページに非表示にする要素には問題があります。

console.log(document.querySelector('#notvisible1').getClientRects().length);
console.log(document.querySelector('#notvisible1').clientHeight);
console.log(document.querySelector('#notvisible2').getClientRects().length);
console.log(document.querySelector('#notvisible2').clientHeight);
console.log(document.querySelector('#notvisible3').getClientRects().length);
console.log(document.querySelector('#notvisible3').clientHeight);

<div id="notvisible1" style="height:0; overflow:hidden; background-color:red;">not visible 1</div>

<div id="notvisible2" style="visibility:hidden; background-color:yellow;">not visible 2</div>

<div id="notvisible3" style="opacity:0; background-color:blue;">not visible 3</div>

結論： したがって、私が示したのは、完璧な方法はないということです。適切な可視性チェックを行うには、最後の3つの方法を組み合わせて使用​​する必要があります。

参考までにgetBoundingClientRect()、特定のケースで機能することがあることに注意してください。

たとえば、要素が非表示になっているdisplay: noneことを確認する簡単なチェックは、次のようになります。

var box = element.getBoundingClientRect();
var visible = box.width && box.height;

これは、幅ゼロ、高さゼロ、およびposition: fixedケースもカバーするため、便利です。ただし、opacity: 0orで非表示になっている要素は報告しませんvisibility: hidden（ただし、どちらもそうではありませんoffsetParent）。

だから私が見つけたのは最も実現可能な方法です：

function visible(elm) {
  if(!elm.offsetHeight && !elm.offsetWidth) { return false; }
  if(getComputedStyle(elm).visibility === 'hidden') { return false; }
  return true;
}

これはこれらの事実に基づいています：

• display: none要素（でも、ネストされた1）が、幅や高さを持っていません。
• visiblityであるhiddenにもネストされた要素のために。

したがって、offsetParentどの親が持っているかをテストするためにDOMツリーでテストしたりループしたりする必要はありませんvisibility: hidden。これはIE 9でも機能するはずです。

opacity: 0折りたたまれた要素（幅​​はあるが高さはない-またはその逆）が実際には表示されないかどうかを議論することもできます。しかし、再び彼らは言うまでもなく隠されていません。

オハド・ナボンの答えに少し追加。

要素の中心が別の要素に属している場合、それは見つかりません。

要素のポイントの1つが表示されていることを確認するには

function isElementVisible(elem) {
    if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
    const style = getComputedStyle(elem);
    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if (style.opacity === 0) return false;
    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0) {
        return false;
    }
    var elementPoints = {
        'center': {
            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
        },
        'top-left': {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().top
        },
        'top-right': {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().top
        },
        'bottom-left': {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().bottom
        },
        'bottom-right': {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().bottom
        }
    }

    for(index in elementPoints) {
        var point = elementPoints[index];
        if (point.x < 0) return false;
        if (point.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
        if (point.y < 0) return false;
        if (point.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
        let pointContainer = document.elementFromPoint(point.x, point.y);
        if (pointContainer !== null) {
            do {
                if (pointContainer === elem) return true;
            } while (pointContainer = pointContainer.parentNode);
        }
    }
    return false;
}

上記の @Guy Messikaの回答を改善し、要素の右側がビューに入る可能性があるため、中心点のXが0未満の場合、ブレークしてfalseを返すのは間違っています。ここに修正があります：

private isVisible(elem) {
    const style = getComputedStyle(elem);

    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if ((style.opacity as any) === 0) return false;

    if (
        elem.offsetWidth +
        elem.offsetHeight +
        elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0
    ) return false;

    const elementPoints = {
        center: {
            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2,
        },
        topLeft: {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().top,
        },
        topRight: {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().top,
        },
        bottomLeft: {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().bottom,
        },
        bottomRight: {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().bottom,
        },
    };

    const docWidth = document.documentElement.clientWidth || window.innerWidth;
    const docHeight = document.documentElement.clientHeight || window.innerHeight;

    if (elementPoints.topLeft.x > docWidth) return false;
    if (elementPoints.topLeft.y > docHeight) return false;
    if (elementPoints.bottomRight.x < 0) return false;
    if (elementPoints.bottomRight.y < 0) return false;

    for (let index in elementPoints) {
        const point = elementPoints[index];
        let pointContainer = document.elementFromPoint(point.x, point.y);
        if (pointContainer !== null) {
            do {
                if (pointContainer === elem) return true;
            } while (pointContainer = pointContainer.parentNode);
        }
    }
    return false;
}

http://code.jquery.com/jquery-1.11.1.jsのjQueryコードにはisHiddenパラメータがあります

var isHidden = function( elem, el ) {
    // isHidden might be called from jQuery#filter function;
    // in that case, element will be second argument
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
};

所有者ドキュメントに関連する追加のチェックがあるようです

これは本当に以下のケースをキャッチするのだろうか：

1. zIndexに基づいて他の要素の後ろに隠されている要素
2. 透明度が完全に表示されていない要素
3. 画面外に配置された要素（つまり、左：-1000px）
4. 可視性のある要素：非表示
5. 表示付き要素：なし
6. テキストやサブ要素が表示されていない要素
7. 高さまたは幅が0に設定された要素

以下は、いくつかの類似した要素の中で唯一表示され、jQueryなしで「class」属性の値を返すように記述したコードです。

  // Build a NodeList:
  var nl = document.querySelectorAll('.myCssSelector');

  // convert it to array:
  var myArray = [];for(var i = nl.length; i--; myArray.unshift(nl[i]));

  // now find the visible (= with offsetWidth more than 0) item:
  for (i =0; i < myArray.length; i++){
    var curEl = myArray[i];
    if (curEl.offsetWidth !== 0){
      return curEl.getAttribute("class");
    }
  }

これは私がやったことです：

HTMLとCSS：要素をデフォルトで非表示にしました

<html>
<body>

<button onclick="myFunction()">Click Me</button>

<p id="demo" style ="visibility: hidden;">Hello World</p> 

</body>
</html> 

JavaScript：可視性が非表示かどうかを確認するコードを追加しました：

<script>
function myFunction() {
   if ( document.getElementById("demo").style.visibility === "hidden"){
   document.getElementById("demo").style.visibility = "visible";
   }
   else document.getElementById("demo").style.visibility = "hidden";
}
</script>

これは、可視性を含むすべてのcssプロパティに対してそれを決定する方法です。

html：

<div id="element">div content</div>

css：

#element
{
visibility:hidden;
}

javascript：

var element = document.getElementById('element');
 if(element.style.visibility == 'hidden'){
alert('hidden');
}
else
{
alert('visible');
}

それはあらゆるcssプロパティで機能し、非常に用途が広く信頼性があります。