Firefox，查詢選擇器和可見僞選擇器

有沒有辦法在Firefox的querySelector（）或querySelectorAll（）函數中使用僞選擇器來檢測可見性？我特別希望能夠做這樣的事情：Firefox，查詢選擇器和可見僞選擇器

elem.querySelector('#list .list-item:visible'); 
elem.querySelector('#section .sub-section:visible .title');

無需擔心瀏覽器不一致或其他執行，只是Firefox瀏覽器。謝謝！

編輯：可見由顯示不是無和能見度未被隱藏定義。

什麼是你的「知名度」的定義是什麼？ – Bergi

將DOM元素的顯示設置爲阻止可行，但理想情況下它還會檢查可見性設置爲可見。 – macguru2000

不，沒有。 The CSS specification沒有定義:visible（或相關）選擇器，並且AFAIK Firefox不執行非標準僞選擇器。

如果你想自己實現，需要注意的jQuery如何實現其:visible選擇：

在jQuery的1.3.1（及以上）的元素是可見的，如果它的CSS「顯示」不「沒有「，它的CSS」可見性「不是」隱藏「的，它的類型（如果它是一個輸入）不是」隱藏「的。在jQuery中1.3.2一個元件是可見的，如果它的瀏覽器報告的offsetWidth或的offsetHeight大於0

2012-11-14 22:46:58

這就是我擔心的......糟糕。我知道這不是一個有用的CSS僞選擇器，但它會在Javascript中真正有用。 – macguru2000

jQuery的實現並不能很好地檢測css可見性屬性，因爲'visibility：hidden'會在文檔上佔用空間 – Esailija

而在哲學層面上，也許這是正確的實現......取決於你認爲可見的東西...如果它在頁面上佔用空間，那麼有一些空間可以說元素是「可見的」。 – macguru2000

由於在沒有本地執行力度：可見僞選擇器I決定使用CSS類來隱藏和顯示我的元素，因此只需檢查類名而不是可見性即可。這是我的選擇是什麼樣子現在：

elem.querySelector('#list .list-item:not(.hidden)');

現在，在2016年，我們還可以使用隱藏的HTML5屬性，因此這個選擇將工作太：

elem.querySelector('#list .list-item:not([hidden])');

2012-11-14 23:19:15 macguru2000

這仍然是2015年最好的方式嗎？ – SuperUberDuper

我相信如此：可見不是，也許永遠不會成爲CSS規範的一部分。 – macguru2000

2016年更流行的做法是使用新的隱藏html5全局屬性。它不完全向後兼容，所以要小心。這裏是Mozilla的文檔https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden – macguru2000

檢查是否元素是可見的，支持在所有主要的瀏覽器：

的jQuery：

$('.list-item').is(':visible');

香草JS：

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

2016-04-18 17:07:29

你確定這兩個例子在所有jQuery版本中都是相同的嗎？ – macguru2000

@ macguru2000它們在最新版本的jQuery中相當，我沒有檢查（因此從未提及過）關於此方法的早期版本的jQuery。 –

我明白了，請不要採取這種錯誤的方式，但是如果你已經這樣做了十多年，你就不再假設提及意味着「最新版本」。想想別人在2年時間內閱讀你的答案會怎麼想，jQuery3？ – macguru2000

使用普通的JavaScript，你也可以模仿jQuery的行爲很容易，把你的querySelector結果到一個數組中，並對其進行篩選：

Array.prototype.slice.call(document.querySelectorAll('your selector'))

與您選擇的結果將創建一個普通數組，你可以過濾爲：

.filter(function (item,index) { return item.style.display!="none" });

甚至其餘的jquery條件（item.style.visibility != "hidden" && item.style.opacity > 0 && ...）。

作爲一個班輪：

Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" });

2017-10-18 10:52:06

回答