如何通過javascript檢查元素的可見性？

我感興趣的方式來檢查一個元素是否有顯示：無風格可解釋性（即風格=「顯示：無」），有一個類有（或繼承）這種風格，或其父母之一是隱藏（和我的元素繼承此）如何通過javascript檢查元素的可見性？

情況1：

<body><div><span style="display:none;">Some hidden text</span></div>

或

<body><div style="display:none;"><span>Some hidden text</span></div>

情況2：

SomeClass { display:none; } 
<body><div class="SomeClass"><span>Some hidden text</span></div>

謝謝，

來源

2009-08-27 Haytham

您正在尋找兩種不同方案的解決方案。

第一種情況是獲取CSS屬性的級聯/計算樣式。請參閱this answer瞭解如何操作。

第二種情況是檢測元素的任何父母是否隱藏。這需要遍歷，並且繁瑣和緩慢。

您可以採取的解決方案outlined here（既然1.3.2的jQuery /灒經營），和剛讀元素的尺寸：

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

如果有尺寸那麼它是在這個意義上可見，它佔據文檔中的一些矩形空間（不管多小）。請注意，對於某些瀏覽器中的某些元素，此技術仍有some downsides，但在大多數情況下應該可以工作。

來源

2009-08-27 19:35:48

不需要遍歷時纔會起作用，我只需要檢查父項是否會影響計算結果風格，因此電腦風格足以讓我... 謝謝您的回答，它幫助了很多，這裏是我最後使用的代碼：功能ISVISIBLE（ELEM） { 如果（elem.currentStyle） // ie only { return elem.currentStyle [「display」]！='none'; } 其他 {0}查詢方式計算是不可見的。 return（elem.offsetWidth> 0 || elem.offsetHeight> 0）; } } 但是，我需要做更多的測試，看看「||」是足夠的，或者我需要有「&&」而不是.. – Haytham

jQuery/Sizzle 1.3.2鏈接已損壞，您現在可以[在此處找到]（https://github.com/jquery/jquery/blob/1.3 0.2/SRC/selector.js＃L961）。 –

在編寫當前jQuery使用的解決方案時，可以在[這裏]找到固定的缺陷（https://github.com/csnover/jquery/commit/0229b83f7e5bf64edb2888ab349bedcd1a45e7c1#L0L281）。進一步討論[這裏]（http://bugs.jquery.com/ticket/4512）。 –

-2

這是你正在嘗試做什麼？

function SomeClass() 
{ 
    if (document.getElementById("MY_DIV_ID").style.display == "none") 
    { 

    } 
}

來源

2009-08-27 19:19:47 Mark

我不認爲這是他想要的...我想他想要一種方法來檢查它，如果它是由類設置的，或者它是以內聯的方式進行檢查的，這種方式只有在內聯 – Zoidberg

這是確定元素是否可見的最快和最簡單的方法。這甚至是如何jQuery做到這一點。

function isVisible(elem) { 
    return elem.offsetWidth > 0 || elem.offsetHeight > 0; 
}

來源

2009-08-27 19:50:02

每個案例都需要自己的檢查，您需要知道該元素的ID。首先，抓住元素（只是這樣做是爲了使代碼可讀性）：

var MyElementName = document.getElementById("MyElementName");

然後做你的檢查：

案例1：

if (MyElementName.style.display == "none")

案例2，尋找在母公司，首先檢查FF：

if ((MyElementName.previousSibling.nodeType == 3) 
    && (MyElementName.parentNode.nextSibling.style.display == "none"))

然後其他瀏覽器：

else (MyElementName.parentNode.style.display == "none")

案例3，尋找所施加的CSS類：

if (MyElementName.className = "SomeClass")

來源

2009-08-27 19:52:14 AyexeM

將上述溶液迎合這種「隱形」場景：

display:none;

但它不適合這個：

visibility: hidden;

爲了包括可見性測試：hidden;該腳本可以作如下修改......

首先，創建一個跨瀏覽器兼容的功能，以獲得所需元素的計算樣式：

computedStyle = function(vElement) { 
    return window.getComputedStyle? 
     ?window.getComputedStyle(vElement,null) 
     :vElement.currentStyle;     //IE 8 and less 
}

其次，創建函數測試知名度

isVisible = function(vElement) { 
    return !(vElement.offsetWidth == 0 && vElement.offsetHeight == 0) 
     && computedStyle(vElement).visibility != "hidden"; 
}

最後，簡單地引用ISVISIBLE功能需要的地方如下：

if (isVisible(myElement)) { 
    alert('You can see me!'); 
} else { 
    alert('I am invisible ha ha!'); 
}

只需注意當前的isVisible（）測試不適合許多「不可見」場景（但是我認爲可以通過增強測試來包含這些測試）。下面是一些例子：

其中元素是相同的顏色與周圍顏色
其中元素是可見的，但物理上落後另一個元件例如。不同的z-index值

這可能也是值得一提的關於上述computedStyle下列（）函數：

它當然可以用於許多其它風格有關的目的除了測試知名度
我選擇忽略：由於補丁瀏覽器支持而導致的僞類型測試，但是如果需要，可以對函數進行較小的修改。

來源

2015-09-06 23:37:02 Pancho

如何通過javascript檢查元素的可見性？

回答

相關問題