Ways to adjust the height of an element using the ::before selector in javascript

Question

Ways to adjust the height of an element using the ::before selector in javascript

Within the realm of styling, there exists an element adorned with the .bg class. Its aesthetic instructions are described as follows:

.bg {
    width:100%;
}

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

Moreover, there exists a JavaScript directive that mandates the height of the .bg class:

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

However, the objective is to assign the height of $(document).height() to .bg:before instead. How can such a task be accomplished using JavaScript? This is because the code

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

does not yield the desired outcome.

Your guidance and assistance are greatly appreciated

javascript css

Answer 1

Answer №1

With the power of JavaScript, you can tweak the rule for .bg:before in a clever manner.

By looping through the style rules in the stylesheet, you can identify if the current rule corresponds to .bg:before (r.selectorText == .bg:before). If it does, you can dynamically adjust its height property (

r.style.height = window.innerHeight + 'px'

).

var styleSheets = document.styleSheets;

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

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

Answer 2

With the power of JavaScript, you can tweak the rule for .bg:before in a clever manner.

By looping through the style rules in the stylesheet, you can identify if the current rule corresponds to .bg:before (r.selectorText == .bg:before). If it does, you can dynamically adjust its height property (

r.style.height = window.innerHeight + 'px'

).

var styleSheets = document.styleSheets;

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

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

Answer 3

Answer №2

It's impossible to achieve with JavaScript since pseudo-elements do not exist within the DOM structure.

Answer 4

It's impossible to achieve with JavaScript since pseudo-elements do not exist within the DOM structure.

Answer 5

Answer №3

By passing a value into the pseudoelement from the main element through a CSS variable, you can access the main element via javascript to calculate and update that value. To ensure a fallback value is used until the value is updated, you can set a default value for the CSS variable in any parent element's CSS (such as 100% in this example).

In code, you can achieve this by using height: var(--bg-height, 100%); in the pseudoclass and then utilizing

element.style.setProperties('--bg-height',document.body.scrollHeight+'px');

in your javascript.

It's worth noting that when using vanilla js – like in this case – in 2022, there may be some box-model peculiarities with certain methods of calculating document height.

See below for a full working example:

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>

Answer 6

By passing a value into the pseudoelement from the main element through a CSS variable, you can access the main element via javascript to calculate and update that value. To ensure a fallback value is used until the value is updated, you can set a default value for the CSS variable in any parent element's CSS (such as 100% in this example).

In code, you can achieve this by using height: var(--bg-height, 100%); in the pseudoclass and then utilizing

element.style.setProperties('--bg-height',document.body.scrollHeight+'px');

in your javascript.

It's worth noting that when using vanilla js – like in this case – in 2022, there may be some box-model peculiarities with certain methods of calculating document height.

See below for a full working example:

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>

Ways to adjust the height of an element using the ::before selector in javascript

Answer №1

Answer №2

Answer №3

Similar questions

Utilize CSS block display for ::before and ::after pseudo elements within a div container

Saving the information into a designated MongoDB repository with a particular title

Guide to installing a dynamic favicon on a Next.js application for a specific route

Is it possible to transmit a WebRTC frame to a Python script?

What are the consequences of submitting a form to a different website through POST method?

The xhr.upload event listener is triggered when the xhr.responseText is empty after loading

What is the best way to customize the endIcon of a styled-component button?

JS: Decreasing the counter while calling the hide() function

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

Alignment issues with Navigation Elements

Tips for attaching inline styles to the body element with a vuejs component

The mathematical logic behind navigating forward and backward in Angular

When the user modifies the input, React fails to update the component state

What is the best way to refresh my Material-UI checkboxes following updates to certain states in a React JS environment?

refers to the spacing between elements

How can I troubleshoot email validation issues in Vue.js?

Modifying modal content disrupts AJAX events

Apply the style when the page loads and remove it when clicked

How can you alter a property within an array of records retrieved from a Mongoose query?

Steps for bundling a Node server with an Electron application