Question

我的代码中有4 <div>个。我用JavaScript来显示和隐藏它们。现在它变得难以管理，因此我需要检测是否显示或隐藏了特定的<div>。我不确定如何做到这一点，哪种方式可以编码？ JQuery或Jqtouch可以很好。感谢

Answer 1

这个功能似乎可以做你想要的。它会检查display none和隐藏的可见性。

JavaScript Function Checks For DOM Element Visibility

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)
}

使用示例

if (isVisible(document.getElementById("myelement"))) {
    // Element is visible.
}

Demo

Answer 2

如果您可以使用jQuery来帮助您，您可以使用：

$( "yourDivSelector" ).is( ":visible" );

没有jQuery，你可以这样做：

alert( isVisible( "divOne" ) );
alert( isVisible( "divTwo" ) );
alert( isVisible( "divThree" ) );

function isVisible( elementId ) {
    var element = document.getElementById( elementId );
    return window.getComputedStyle( element, null ).display != "none";
}

jsFiddle：http://jsfiddle.net/davidbuzatto/N3wf6/

有关此window.getComputedStyle的更多信息：https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Answer 3

因为我不确定100％你在做什么隐藏/显示...

但是如果你设置一个属性，例如显示

然后..

function elementhidden()
{
    1. Get your element
    2. Check the elemnet atrribute status
    3. If its hide value then return true
    4. If its show value then return false

}

提供一个例子，告诉你我可以做什么代码......

Answer 4

您可以使用document.elementFromPoint(x, y)作为x和y传递div的位置并检查它是不错的对象。

这假设没有其他元素覆盖div的左上角。

这可能取决于你所说的“可见”：“完全可见”？ “至少有一点可见”？那么由于滚动位置而不可见的视口部分呢？如果浏览器窗口部分在屏幕外（这可能很棘手）？

Answer 5

取决于如何完全隐藏div，但你可以使用

if(document.getElementById("myDiv").style.display=="none"){
    //do something
}

检测何时显示<div> </div>

5 个答案: