Question

我需要伪: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及更高版本）：reference。

Answer 2

正如Paulie_D所说，“jQuery无法选择伪元素。”

但是，如果您网站上的元素的样式与它们在JSFiddle中的样式相同，那么div最终将与：之前的高度相同，您可以获得以下值：

$('.test').height()

如果不一样，那就告诉我们为什么你想要达到高度，你可以做其他事情。

Answer 3

您可以根据您的布局以某种方式接近它。如果你的伪元素溢出了父元素，那么scrollWith / scrollHeight将为你提供伪元素尺寸，因为该属性返回框内容的整体大小，可见（可滚动）或不可用。

参考文献：

javascript：获取伪的高度：在元素之前

3 个答案: