Question

我有一个DIV，有时是隐藏的，在这种情况下我不希望谷歌添加出现/在这个DIV中加载。

使用javascript进行此类检查的最佳做法是什么？

Answer 1

您应该通过window.getComputedStyle而不是节点的 style 属性来查看所需节点的计算样式，因为其他地方的css也可能会影响它。

检查节点是否被另一个节点覆盖要困难得多，一种方法是使用document.elementFromPoint找出哪个节点在特定点最顶端，然后在节点应该到达的地方执行此操作你很满意它是可见的。例如，检查节点的中心是您的节点。

function isHidden(node, checkIfCovered) {
    var absPosition = function absPosition(node) {
            var x = 0, y = 0,
                h = node.offsetHeight || 0, w = node.offsetWidth || 0;
            do {
                node.offsetLeft && (x = x + node.offsetLeft);
                node.offsetTop && (y = y + node.offsetTop);
            } while (node = node.offsetParent);
            return {x: x, y: y, h: h, w: w};
        },
        o, style;
    if (checkIfCovered && document.elementFromPoint) { // only if supported
        o = absPosition(node); // get position & size
        o.centre = {x: o.x + o.w / 2, y: o.y + o.h / 2}; // centre of node
        if (document.elementFromPoint(o.centre.x, o.centre.y) !== node) {
            return true; // another node is in the centre => covered
        }
    }
    do { // loop up over parent nodes
        if (node.nodeType === 9) break; // skip #document
        style = window.getComputedStyle(node);
        if (   style.display === 'none'
            || style.visibility === 'hidden'
            || style.opacity === '0'
        ) {
            return true;
        }
    } while (node = node.parentNode);
    // passed all tests, not hidden
    return false;
}

使用示例

isHidden(document.getElementById('myDivId')); // true->hidden
isHidden(document.getElementById('myDivId'), true); // true->hidden or covered

需要考虑的其他事项

节点是否位于可以滚动到视图的位置？见Fabrizio Calderan's comment。
现已编辑。父节点是否隐藏？您可能希望循环DOM树以找到它。显然，如果他们被覆盖也没关系。见Loïc Faure-Lacroix's comment。

Answer 2

如果您的div有ID，请尝试：

if((document.getElementById('your_div_id').style.display=='none') || (document.getElementById('your_div_id').style.visibility=='hidden')){
//its hidden
}else{
//its not
}

Answer 3

您可以通过

进行检查

var div = document.getElementById('div_id');
if( div.style.visibility=="hidden"
    || div.style.display=="none")
 {   alert("div is hidden"); }

Answer 4

var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;

isVisible会给你隐藏或可见的div。

Answer 5

有几种方法可以知道对象是否隐藏。有几种方法可以找到，但事实是它比大多数解决方案复杂得多。

我不能不幸地把它混为一谈，但我可以告诉你该怎么做。

隐藏对象可能仍会显示与none不同的内容或默认的可见性。如果隐藏父对象，则子元素也会隐藏，但显示属性保持不变。

换句话说，你必须为每个父元素冒泡，直到你找到一个隐藏的元素或根。

也就是说，像display和visibility这样的css属性并不是隐藏元素的唯一方法。您还可以检查overflow: hidden以及对象是否在边界框之外。

伪代码

def visible(initial, element)
    if element.invisible or element.hidden
       // Element was simply hidden so false
       return false

    if element != initial and elemen.has_overflow_hidden && initial.outside(element)
       // Here we check if our element is inside the bounding box of a overflow hidden
       // Parent.
       return false

    if element.opacity == 0
       return false

    if element == element.parent
       // reached the root
       return true

    visible(initial, element.parent)

if (visible(element, element))
  do something

else

  do something else

据我所知，遗憾的是并没有处理所有案件。但它应该绰绰有余。它不处理z-index，它可能不适用于绝对位置，相对位置和固定位置。

Answer 6

<script>
function isHidden(divId){
   styleValue = document.getElementById(divId).style.display;
   if(styleValue == 'none'){
      return true;
   }
   else{
     return false;
   }
}
</script>


returnValue = isHidden(); //return true if hidden

Answer 7

在jquery中：

$('#div').is(':visible');
$('#div').is(':hidden');

Answer 8

您正在查看DOM元素（在本例中）DIV，CSS属性。隐藏元素有两种方法。

一个是显示：无，另一个是可见性：隐藏。

在jQuery中，您可以执行以下操作：

 if !($('#div-id').css('display') == 'none'){
    JAVASCRIPT_TO_LOAD_ADS_GOES_HERE
 }

如果隐藏了可见性，请执行相同操作，但将.css('visibility')与hidden进行比较。

如何检测div是否被javascript隐藏

8 个答案:

需要考虑的其他事项