測試DOM中元素的最佳方法是什么

Question

有幾種方法可以做到這一點（我知道）。

測試css顯示

if ($('#foo').css('display') == 'none')

測試可見性

if ($('#foo').is(':visible'))

在可見性中，我可以檢查元素是否存在。

如果元素占用文檔中的空間，則認為元素是可見的。 可見元素的寬度或高度大於零。

具有可見性的元素：隱藏或不透明度：0被認為是可見的，因為它們仍然占用布局中的空間。

資源

但是，請注意，我無法測試可見性（由用戶），因為：

隱藏元素可以通過將display屬性設置為“none”或將visibility屬性設置為“hidden”來完成。 但請注意，這兩種方法會產生不同的結果：

visibility： hidden隱藏了一個元素，但它仍然會占用與之前相同的空間。 該元素將被隱藏，但仍會影響布局。

display： none隱藏一個元素，它不會占用任何空間。 元素將被隱藏，頁面將顯示為元素不存在：

資源

因此，在這兩個示例中，我都測試元素是否在用戶的所有意義上都可見。

所以我的問題是：

• 兩個if的代碼之間的區別是什么？
• 測試元素是否對用戶可見的最佳方法是什么：

我是否應該使用以下內容：

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden')

Answer 1

我認為你最好的辦法是實現下面的自定義功能，並在新事物出現時進行測試/改進，

$.fn.isReallyVisible = function () { //rename function name as you like..
    return (this.css('display') != 'none' &&
            this.css('visibility') != 'hidden' &&
            this.css('opacity') > 0);
}

以上應該是跨瀏覽器證明，因為我們使用jQuery .css函數（特別是對於不透明度）。

DEMO

Answer 2

兩者之間的區別在於，使用“visible”屬性隱藏會在頁面上留下元素，而不會實際顯示。 因此，當頁面呈現顯示的其余部分時，將考慮間距。

似乎以另一種方式執行它實際上會阻止元素被放到頁面上，這可以改變頁面上其他元素的布局方式。

通常測試可見部分就足夠了我的經驗，但是如果你想要更完整，那么是的，你必須檢查多個屬性上的“&&”條件。 它實際上取決於您使用的代碼是多么干凈，以及系統的其他UI方面的測試結果如何。

另一件需要考慮的是測試的目的是什么。 您是在測試您編寫的代碼，還是瀏覽器如何使用Javascript來呈現頁面？ 您希望測試您正在創建的代碼，並依賴於瀏覽器的工作原理（因為如果瀏覽器停止工作，那么整個事情都是不可靠的）。 因此，如果您的代碼告訴元素設置某個屬性，那么檢查該屬性就是您需要做的所有測試。 除此之外的任何事情都只能通過在代碼本身之外進行測試來證明（就像在手工查看頁面和其他類似的事情一樣）。

Answer 3

如果你想查看DOM中是否存在元素，你可以這樣做：

$.fn.exists = function () {
    return this.length > 0;
}

用法：

$('#myid').exists();