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

Question

有一个带有 .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()); 不起作用。

提前致谢

Answer 1

使用 JavaScript，您可以用这种方式修改 .bg:before 的规则。

循环样式表中的规则，如果当前规则是.bg:before(r.selectorText == .bg:before) ，改变它的高度(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%;
}