0

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

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

4

8 回答 8

3

您应该通过查看您想要的节点的计算样式window.getComputedStyle，而不是节点的样式属性，因为其他地方的 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的评论。
  • 现在编辑了。父节点是否隐藏？您可能需要循环 DOM 树来找出这一点。很明显，如果它们被覆盖就可以了。请参阅Loïc Faure-Lacroix的评论。
于 2013-04-18T10:38:48.820 回答
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
}
于 2013-04-18T10:35:28.523 回答
0

你可以通过

var div = document.getElementById('div_id');
if( div.style.visibility=="hidden"
    || div.style.display=="none")
 {   alert("div is hidden"); }
于 2013-04-18T10:36:43.610 回答
0 
var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;

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

于 2013-04-18T10:38:42.183 回答
0

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

不幸的是，我现在不能把它捣碎，但我可以告诉我该怎么做。

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

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

也就是说，css 属性display不是visibility隐藏元素的唯一方法。您还可以检查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，它可能不适用于绝对位置、相对位置和固定位置。

于 2013-04-18T10:46:33.513 回答
0 
<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
于 2013-04-18T10:52:12.413 回答
-1

在 jquery 中：

$('#div').is(':visible');
$('#div').is(':hidden');
于 2013-04-18T10:36:21.143 回答
-2

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

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

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

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

在可见性隐藏的情况下，执行相同操作，但.css('visibility')与hidden.

于 2013-04-18T10:37:08.253 回答