javascript：獲得僞高度：元素前

Question

我需要僞元素:before的高度。聽起來很簡單，但我無法讓它工作。這是我曾嘗試：

$('.test:before').height() // --> null 

而一個jsfiddle 任何建議我做錯了什麼？

更新：.test的高度取決於內容。我需要做的是，當高度大於僞元素時，我需要在元素的右側添加填充。但是，因爲僞元素的高度是由CSS設置的，我不知道它在我的程序中

Answer 1

正如Paulie_D所說，「僞元素不能通過jQuery來選擇」。

但是，如果您網站上的元素的樣式與JSFiddle中的元素的樣式相同，那麼div最終將與之前的高度相同：before，您可以得到以下值：

$('.test').height() 

如果不一樣，那麼讓我們知道爲什麼你希望得到身高，並且可能有別的事情可以做。

Answer 2

根據您的佈局，您可以以某種方式接近它。 如果您的僞元素溢出父元素，那麼scrollWith/scrollHeight會爲您提供僞元素的維度，因爲該屬性返回該框的內容的整體大小，可見（可滾動）或不可見。

參考文獻：

• MDN Element.scrollWidth
• Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

Answer 3

超級晚答覆，但：你可以使用香草JavaScript的使用getComputedStyle方法僞元素的尺寸來獲得：

var testBox = document.querySelector('.test'); 

// Or with jQuery: testBox = $('.test').get(0); - We want the JS element, without the jQuery wrapper 

var pseudoBeforeHeight = window.getComputedStyle(testBox, ':before').height; // Returns (string) "70px" 

這將返回一個不管CSS聲明如何（例如， 4.375rem = 70px，10vh = 70px，calc(8vh + 1rem) = 70px，因此要獲得（像素）的數量，你可以這樣做：

var pseudoHeightNum = parseInt(pseudoBeforeHeight);

至於兼容性：CanIUse表明，截至7月2017它的作品幾乎跨越所有現代瀏覽器（顯然甚至支持IE9及以上版本）：reference。