1

DOM オブジェクトが表示されているかどうかを確認する最善の方法は何ですか?

オブジェクトが非表示と見なされるさまざまなケース:

  1. 表示: なし;
  2. 可視性: 非表示;
  3. 親の 1 つが display: none または visibility: hidden を持っている
  4. 別の DOM 要素が、クエリされた要素を覆い隠しています (あると便利ですが、なくても管理できます)。
  5. 画面境界外のアイテム。
4

6 に答える 6

7

http://snippets.dzone.com/posts/show/5757から盗んだもの:

function isVisible(obj)
{
    if (obj == document) return true

    if (!obj) return false
    if (!obj.parentNode) return false
    if (obj.style) {
        if (obj.style.display == 'none') return false
        if (obj.style.visibility == 'hidden') return false
    }

    //Try the computed style in a standard way
    if (window.getComputedStyle) {
        var style = window.getComputedStyle(obj, "")
        if (style.display == 'none') return false
        if (style.visibility == 'hidden') return false
    }

    //Or get the computed style using IE's silly proprietary way
    var style = obj.currentStyle
    if (style) {
        if (style['display'] == 'none') return false
        if (style['visibility'] == 'hidden') return false
    }

    return isVisible(obj.parentNode)
}
于 2009-06-29T02:47:24.087 に答える
6

その mootools とこれは mootools メーリング リストで扱われ、Element.shortcuts の一部になる予定なので...

/*
* Inspired from http://github.com/jeresig/sizzle/commit/7631f9c3f85e5fa72ac51532399cb593c2cdc71f
* and this http://github.com/jeresig/sizzle/commit/5716360040a440041da19823964f96d025ca734b
* and then http://dev.jquery.com/ticket/4512
*/

Element.implement({

  isHidden: function(){
    var w = this.offsetWidth, h = this.offsetHeight,
    force = (this.tagName === 'TR');
    return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
  },

  isVisible: function(){
    return !this.isHidden();
  }

});

http://gist.github.com/137880

于 2009-07-01T15:17:56.020 に答える
4

上記の isVisible メソッドは mootools more Element.Shortcuts に含まれていたようです。

ただし、これらのメソッドはいずれもブラウザのスクロール状態を考慮していません。次の方法は、元の質問に記載されている要件 5 を満たすために、私にとってはうまく機能しているようです。

Element.implement({
isFullyVisible: function() {
    if(this.isVisible()) {
        var coord = this.getCoordinates(),
            winScroll = window.getScroll();

        return winScroll.y <= coord.top;
    } else {
        return false;
    }
}
});
于 2010-08-25T17:48:26.827 に答える
1 
/**
 * Checks display and visibility of elements and it's parents
 * @param  DomElement  el
 * @param  boolean isDeep Watch parents? Default is true
 * @return {Boolean}
 *
 * @author Oleksandr Knyga <oleksandrknyga@gmail.com>
 */
function isVisible(el, isDeep) {
    var elIsVisible = true;

    if("undefined" === typeof isDeep) {
        isDeep = true;
    }

    elIsVisible = elIsVisible && el.offsetWidth > 0 && el.offsetHeight > 0;

    if(isDeep && elIsVisible) {

        while('BODY' != el.tagName && elIsVisible) {
            elIsVisible = elIsVisible && 'hidden' != window.getComputedStyle(el).visibility;
            el = el.parentElement;
        }
    }

    return elIsVisible;
}
于 2014-02-11T16:03:16.203 に答える
0 
<script type="text/javascript">

    function isObjVisibile(obj){

        return obj.offsetTop != -1;
    }
</script>


<input type=button onclick="alert(isObjVisibile(document.getElementById('myTest')))" value='is visible'>
<input type=button onclick="document.getElementById('test2').style.display = 'none';" value='hide'>
<div id='test2'>
<div id='myTest'>test</div>
</div>
于 2011-06-22T15:07:26.203 に答える