如何使用 javascript 将高度设置为带有 :: 在选择器之前的元素？

Question

有一个元素with.bg class。css规则如下：

.bg {
    width:100%;
}

.bg:before {
    position: absolute;
    content: '';
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
}

我有一个 javascript 规则，我将高度设置为 bg class：

$(".bg").height($(document).height());

但我想将 $(document).height() 设置为.bg:before。 如何使用 javascript 实现此目的？ 因为$(".bg:before").height($(document).height()); 不起作用。

提前致谢

Answer 1

使用JavaScript之前，您可以修改.bg:before的规则。

循环浏览样式表中的规则，如果当前规则为.bg:before （ r.selectorText == .bg:before ），请更改其height （ r.style.height = window.innerHeight + 'px' ）。

 var ss = document.styleSheets; for (i = 0; i < ss.length; i++) { var rules = ss[i]; for (j = 0; j < rules.cssRules.length; j++) { var r = rules.cssRules[j]; if (r.selectorText == ".bg:before" || r.selectorText == ".bg::before") { console.log('Old rule: ' + r.cssText) r.style.height = window.innerHeight + 'px'; console.log('Modified rule: ' + r.cssText) } } } 

 .bg { width: 100%; } .bg::before { position: absolute; content: ''; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; } 

Answer 2

您根本无法使用javascript，因为伪元素不是DOM的一部分。

Answer 3

通过 CSS 变量将值从主元素传递到伪元素。 可以通过 javascript 访问主要元素，并计算和更新该值。 您还可以设置一个回退值，直到该值被更新（您的 100%），或者通过在任何父元素的 CSS 中设置 CSS 变量的默认值。

所有这些都在代码中：使用height: var(--bg-height, 100%); 在伪类中，然后使用element.style.setProperties('--bg-height',document.body.scrollHeight+'px'); 在您的 javascript 中。

请注意，如果您使用 vanilla js（我在这里，它是 2022 年），则某些计算文档高度的方法存在一些框模型怪异之处。

一个完整的工作示例如下：

 let el = document.getElementById('example'); el.style.setProperty('--bg-height', document.body.scrollHeight+'px');

 /************************************************* The CSS from the question. I lightened the grey (dropped the transparency from 0.5 to 0.25) and added a var for height. ***/.bg { width:100%; }.bg:before { position: absolute; content: ''; background: rgba(0,0,0,0.25); width: 100%; height: var(--bg-height, 100%); } /************************************************* Following is for this demo and can be removed. ***/:root { font: 16px Roboto, Helvetica, Barlow, sans-serif; } body { } a { color: #435; } section>p { max-width: 600px; margin: 1rem auto; }

 <section class="bg" id="example"> <p>Here is a section that is the main element being focused on. It has a transparent (thus, white) background. There is a:before pseudoelement positioned absolutely over it with a highly transparent black (thus a light grey tint). Using javascript, this pseudoelement is set to a height equal to the document itself.</p> <p>Resizing and other things that would change the document height should be taken into account and observed.</p> <p>Answer to <a href="https://stackoverflow.com/questions/27358143/how-to-set-height-to-an-element-with-before-selector-with-javascript">How to set height to an element with::before selector with javascript?</a></p> </section>