正文 

当前位置： 首页 > 问答 >

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

     2023-03-05     127

关键词：

【中文标题】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 能在这个上获得一个接受标记真是太棒了，即使有点晚了?

如何通过Javascript更改伪：before元素的内容值[重复]

】如何通过Javascript更改伪：before元素的内容值[重复]【英文标题】：Howchangecontentvalueofpseudo:beforeelementbyJavascript[duplicate]【发布时间】：2012-05-1617:42:27【问题描述】：我有由CSS构建的grap，它是由JS动态更改的。我通过伪元素将图形... 查看详情

:before 和 :after 伪元素可以从父元素继承高度吗？

】:before和:after伪元素可以从父元素继承高度吗？【英文标题】：Canthe:beforeand:afterpseudo-elementsinheritheightfromtheparentelement?【发布时间】：2012-08-2022:27:48【问题描述】：我想知道:before和:after伪元素是否可以使用inherit值从父级继承高... 查看详情

宽度和高度似乎不适用于 :before 伪元素

】宽度和高度似乎不适用于:before伪元素【英文标题】：widthandheightdoesn\'tseemtoworkon:beforepseudo-element【发布时间】：2014-01-1811:06:42【问题描述】：Here是个小提琴。<p>foo<aclass="infolink"href="#">bar</a>baz</p>和a.infolink::befo... 查看详情

CSS ::before伪元素行高？

】CSS::before伪元素行高？【英文标题】：CSS::beforepseudo-elementline-height?【发布时间】：2013-10-2616:08:31【问题描述】：我的段落的高度/行高为50像素，text-align:center使文本居中。但是p:before导致它的高度/行高增加，导致文本向下颠簸... 查看详情

如何使用python爬虫获取css伪元素例如：before

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。参考技术A同问，我也找了，没有合适的方法。 查看详情

如何使用 JavaScript 获取 DOM 元素的 ::before 内容？

】如何使用JavaScript获取DOM元素的::before内容？【英文标题】：HowtogetaDOMelement\'s::beforecontentwithJavaScript?【发布时间】：2017-11-0415:22:19【问题描述】：我想知道是否可以获取一个DOM元素的::before内容，这是由CSS3设置的。我已经尝试... 查看详情

如何保持伪选择器 ::before 的动态高度？

】如何保持伪选择器::before的动态高度？【英文标题】：Howtomaintainadynamicheightofthepseudoselector::before?【发布时间】：2022-01-1213:36:25【问题描述】：UI视图有一个手风琴，我需要在手风琴及其子项中显示一些连接器表示，我正在尝试... 查看详情

::before和::after伪元素的用法

PS：原文https://www.cnblogs.com/keyi/p/5943133.html::before和::after伪元素的用法 一、介绍css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,: 查看详情

伪元素选择器：before以及：after

E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理":"与"::"区别在于区分伪类和伪元素重点：E::before、E::after是一个... 查看详情

html：::before和::after伪元素的用法

随笔-366  文章-0  评论-392 一、介绍css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after 查看详情

无法更改访问的内容：before 伪元素

】无法更改访问的内容：before伪元素【英文标题】：Cannotchangethecontentofvisited:beforepseudo-elements【发布时间】：2013-04-1707:42:40【问题描述】：我试图为访问的链接添加一些效果，然后我遇到了这个问题。这里是代码：http://dabblet.com/... 查看详情

伪元素::after和::before应该这么用(代码片段)

1什么是伪元素？CSS在渲染文档的时候，伪元素可以通过css给HTML添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做CSS的样式来进行展现，用法和普通的元素用法是一样的。1.1常用的伪元素和伪类伪元... 查看详情

:before/:after 伪元素的内容垂直居中

】:before/:after伪元素的内容垂直居中【英文标题】：Verticallycenteringcontentof:before/:afterpseudo-elements【发布时间】：2013-01-0913:00:36【问题描述】：我正在尝试实现类似于这张图片的效果：我有一个包含在div中的图像（作为幻灯片的一... 查看详情

如何在 :before 元素的伪元素上添加 svg 作为内容？ [复制]

】如何在:before元素的伪元素上添加svg作为内容？[复制]【英文标题】：HowcanIaddasvgascontenton:beforepseudoelementofanelement?[duplicate]【发布时间】：2018-01-2306:31:45【问题描述】：我正在尝试在:before伪元素的内容中使用svg。为此，我正在关... 查看详情

详解css属性-:before&&:after(代码片段)

...的写法：这里的::after和::before就是我们今天来探讨的css伪元素之二-:before&&:after。伪元素首先我们要明白什么是伪元素，css设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式一般为：selector:pseudo-elementp... 查看详情

css中的before和:after伪元素深入理解

1、定义：“伪元素”，顾名思义。就是它创建了一个虚假的元素，并且将其虚假的元素插入到目标元素的内容之前或之后。2：特点：a、它在实际文档中不改变什么，但是对用户可见，可以通过css控制，源码中看不到b、伪元素... 查看详情

支持 CSS :before 和 :after 伪元素的 html 元素列表

】支持CSS:before和:after伪元素的html元素列表【英文标题】：ListofhtmlelementsthatsupporttheCSS:beforeand:afterpseudoelements【发布时间】：2012-01-2702:42:36【问题描述】：我知道空元素不支持:before和:after伪元素，但是这些呢：&lt;select&gt;&am... 查看详情

伪元素::before与::after的用法

::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。一、与普通元素一样可以给其添加样... 查看详情