How to set height to an element with ::before selector with javascript?

Question

There is an element with.bg class. The css rules are the following:

.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:

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

But I want to set the $(document).height() to.bg:before. How can I achieve this with javascript? Because $(".bg:before").height($(document).height()); does not work.

Thanks in advance

Answer 1

Using JavaScript you can modify the rule for .bg:before this way.

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' ).

 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

Pass a value into the pseudoelement from the main element via a CSS variable. The main element can be accessed via javascript and that value calculated and updated. 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.

All of that in code: Use a height: var(--bg-height, 100%); in the pseudoclass and then use element.style.setProperties('--bg-height',document.body.scrollHeight+'px'); in your 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.

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>