javascript：获取伪元素的高度：before元素

Posted 2023-03-05

【中文标题】javascript：获取伪元素的高度：before元素

【英文标题】：javascript: get height of pseudo :before element

【发布时间】：2014-06-08 12:54:49

【问题描述】：

我需要一个伪 :before 元素的高度。听起来很简单，但我无法让它工作。这是我尝试过的：

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

还有一个jsfiddle 有什么建议我做错了什么？

更新：.test 的高度取决于内容。我需要做的是，当高度大于伪元素时，我需要在元素的右侧添加一个填充。但是，因为伪元素的高度是由css设置的，我的程序中并不知道

【问题讨论】：

伪元素不能被 JQ 选择，因为它们不在 DOM 中。 为什么你需要高度...你还没有定义这个吗？

@Paulie_D 也许他正在使用 CSS 媒体选择并且不知道哪些样式规则有效？

您应该能够将window.getComputedStyle() 与伪元素一起使用，但我不确定浏览器是否支持。见jsfiddle.net/BoltClock/asCV9/1

@BoltClock 太棒了。 This here 显示浏览器支持

我已经添加了解释为什么以及我正在尝试做什么！感谢您到目前为止的回答！

【参考方案1】：

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

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

$('.test').height()

如果不一样，请告诉我们您希望得到高度的原因，您可能还可以做其他事情。

【参考方案2】：

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

参考资料：

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

【参考方案3】：

超迟回复，但是：您可以使用 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。

【讨论】：

@JeanlucaScaljeri 能在这个上获得一个接受标记真是太棒了，即使有点晚了?