javascript：獲取偽的高度：在元素之前

Question

我需要一個偽的高度:before元素:before 。 聽起來很簡單，但我無法讓它發揮作用。 這是我嘗試過的：

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

和一個jsfiddle任何建議我做錯了什么？

更新： .test的高度取決於內容。 我需要做的是，當高度比偽元素大時，我需要在元素的右邊添加一個填充。 但是，因為偽元素的高度是由css設置的，所以在我的程序中我不知道它

Answer 1

超級回復，但是：您可以使用vanilla 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建議，截至2017年7月，它幾乎適用於所有現代瀏覽器（顯然甚至支持IE9及更高版本）： 參考 。

Answer 2

正如Paulie_D所說，“偽元素不能被jQuery選擇”。

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

$('.test').height()

如果它不相同，那么讓我們知道為什么你想要達到高度，你可以做其他事情。

Answer 3

您可以根據您的布局以某種方式接近它。 如果你的偽元素溢出了父元素，那么scrollWith / scrollHeight將為你提供偽元素維度，因為該屬性返回盒子內容的整體大小，可見（可滾動）或不可見。

參考文獻：

• MDN Element.scrollWidth
• 分別了解offsetWidth，clientWidth，scrollWidth和-Height