什麼是測試DOM中元素的最佳方式

測試的CSS顯示

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

測試能見度

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

在能見度我可以檢查，如果該元素是存在的。

如果元素消耗文檔中的空間，則認爲它們是可見的。可見元素的寬度或高度大於零。

具有可見性的元素：隱藏或不透明度：0被視爲可見，，因爲它們仍佔用佈局中的空間。

Source

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

隱藏一個元素可以由顯示屬性設置爲完成「無」或可見性屬性爲「隱藏」。但是，請注意這兩種方法產生不同的結果：

知名度：隱藏的隱藏元素，但它仍然會像以前一樣佔用相同空間。該元素將被隱藏，但仍會影響佈局。

顯示：沒有隱藏一個元素，它不會佔用任何空間。該元素會被隱藏，並且頁面將顯示，如果元素是不是有：

Source

所以在沒有我測試的例子，如果該元素是可見的所有感官的用戶。

所以我的問題是：

從算什麼上面兩個，如果的代碼之間的區別是什麼？
什麼是測試如果一個元素是對用戶可見的最好辦法：

我應該有使用類似：

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

來源

2012-05-14 Michel Ayres

你有沒有嘗試過的代碼最後一塊來看看是否可行？ –

** 1。**測試用戶是否可見元素的最佳方法是什麼？ >>'$（'＃foo'）。is（'：visible'）'是檢查元素是否對用戶可見的最好方法（意思是顯示）** 2。**兩個if是從上面的代碼？ >>你引用了'visible'和'display'之間的區別。那麼現在，你的問題是什麼？ –

對於一個完全可見的元素，通過'z-index'將另一個元素放置在它上面呢？如果這個最頂級的div有不透明的背景呢？還是透明的？或者*部分*透明的？「以下」元素是否被視爲可見？ – Jon

我認爲最好的辦法是實行像一個自定義函數並且隨着新事物出現而測試/改善，

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

以上應該是跨瀏覽器證明，因爲我們ar e使用jQuery .css函數（專用於不透明度）。

DEMO

來源

2012-05-14 21:20:21

真的很好。只是想知道，你在'$（'＃foo'）。'（'：visible'）''上使用'this.css（'display'）！='none''。你能告訴我爲什麼選擇這個嗎？ –

@MichelAyres只是一個小小的改進。 'is'是jQuery函數，可以使用不同類型的參數和'：visible'就是其中的一個。在內部，它首先會過濾它：'：visible'並執行其相應的流程，最後它會做同樣的事情。 –

兩者之間的區別是，作爲隱藏使用「可見」屬性留下頁面上的元素，只是沒有實際顯示。因此，頁面呈現顯示的其餘部分時會考慮間距。

看來，這樣做實際上阻止了元素被放到頁面上，這可以改變頁面上其他元素的佈局方式。

通常測試可見部分已經足夠從我的經驗，但如果你想要更完整，那麼是的，你將不得不檢查使用「& &」條件的多個屬性。這實際上完全取決於您使用的代碼的清潔程度，以及系統的其餘UI方面的測試程度。

要考慮的另一件事是測試的目的是什麼。你正在測試你寫的代碼，或者瀏覽器如何使用Javascript來渲染頁面？你想要測試你正在創建的代碼，並依賴於瀏覽器工作的事實（因爲如果瀏覽器停止工作，那麼整個事情不可靠）。所以如果你的代碼告訴元素設置一些屬性，那麼檢查這個屬性就是你需要做的所有測試。除此之外的任何事情都只能通過在代碼本身之外進行測試才能真正得到證實（就像手動查看頁面和其他類似的東西一樣）。

來源

2012-05-14 19:43:21 Caleb

我的關注點更多的是關於跨瀏覽器和性能。此外，如果我的邏輯中有一些我錯過了。這就是爲什麼我希望有人向我解釋這樣做的差異和最佳方式。如果你看看SO，你可以看到很多關於「在我的dom中尋找waldo」類型的答案。 –

如果你想看看在DOM中存在的元素，你可能只是這樣做：

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

用法：

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

來源

2012-05-14 20:27:58 Gabe

應該是'this.length> 0'。 –

這是一個很好的答案，但是這不會比上面兩個（在問題中）花費更多的時間？或者他們是別人之一？ –

@FelixKling他正在使用'this。長度> 0'我不理解你的評論（他只在他的編輯中加入了對js函數的調用） –

什麼是測試DOM中元素的最佳方式

回答

相關問題