如何使用 javascript 使用 ::before 选择器为元素设置高度

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

本文关键字：元素 设置 高度 选择器 before 何使用 javascript 使用      更新时间：2023-09-26

有一个带有.bg类的元素。css 规则如下： 

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

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

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

但是我想将 $（document）.height（） 设置为 .bg：before。我如何使用javascript实现这一点？因为$(".bg:before").height($(document).height());不起作用。

提前致谢

使用 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%;
}

你根本不能使用 javascript，因为伪元素不是 DOM 的一部分。

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

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

请注意，如果您使用香草 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>

相关文章：