[英]How to set height to an element with ::before selector with javascript?
There is an element with.bg class. The css rules are the following:有一个元素with.bg class。css规则如下:
.bg {
width:100%;
}
.bg:before {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}
and I have a javascript rule, where I am setting the height to bg class:我有一个 javascript 规则,我将高度设置为 bg class:
$(".bg").height($(document).height());
But I want to set the $(document).height() to.bg:before.但我想将 $(document).height() 设置为.bg:before。 How can I achieve this with javascript?如何使用 javascript 实现此目的? Because $(".bg:before").height($(document).height());
因为$(".bg:before").height($(document).height());
does not work.不起作用。
Thanks in advance提前致谢
Using JavaScript you can modify the rule for .bg:before
this way. 使用JavaScript之前,您可以修改.bg:before
的规则。
Loop through the rules in stylesheet, if the current rule is .bg:before
( r.selectorText == .bg:before
) , change its height
( r.style.height = window.innerHeight + 'px'
). 循环浏览样式表中的规则,如果当前规则为.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%; }
您根本无法使用javascript,因为伪元素不是DOM的一部分。
Pass a value into the pseudoelement from the main element via a CSS variable.通过 CSS 变量将值从主元素传递到伪元素。 The main element can be accessed via javascript and that value calculated and updated.可以通过 javascript 访问主要元素,并计算和更新该值。 You can also set a fallback value to be used until the value is updated as I have here (your 100%), or by setting a default value for the CSS variable in any parent element's CSS.您还可以设置一个回退值,直到该值被更新(您的 100%),或者通过在任何父元素的 CSS 中设置 CSS 变量的默认值。
All of that in code: Use a height: var(--bg-height, 100%);
所有这些都在代码中:使用height: var(--bg-height, 100%);
in the pseudoclass and then use element.style.setProperties('--bg-height',document.body.scrollHeight+'px');
在伪类中,然后使用element.style.setProperties('--bg-height',document.body.scrollHeight+'px');
in your javascript.在您的 javascript 中。
Note that if you use vanilla js (which I am here, it being 2022), there are some box-model weirdness with certain methods of calculating document height.请注意,如果您使用 vanilla js(我在这里,它是 2022 年),则某些计算文档高度的方法存在一些框模型怪异之处。
A full working example is as follows:一个完整的工作示例如下:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.