javascript:获取伪高度:元素之前

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 .