通过 javascript 设置 css 变量

Question

我正在尝试获取浏览器窗口的高度和宽度并将其显示在正文上以及更改高度以匹配。

这是我当前的代码：

window.onresize = window.onload = function() {
  width = this.innerWidth;
  height = this.innerHeight;
  document.body.innerHTML = width + 'x' + height; // For demo purposes
}

上面的代码在body上显示宽度和高度ok，现在是时候将它添加到一个css变量中了：

var header = document.querySelector('.header')

window.onresize = window.onload = function() {
  width = this.innerWidth;
  height = this.innerHeight;
  header.style.setProperty('--height', height);
  header.style.setProperty('--width', width);
  document.body.innerHTML = width + 'x' + height; // For demo purposes
}

我知道代码不正确但我找不到任何可比较的示例，这里有一个小提琴，以防代码不够。

https://jsfiddle.net/rbtwsxd8/6/

Answer 1

window.onresize = window.onload = function() {
    var header = document.querySelector('.header')
    width = this.innerWidth;
    height = this.innerHeight;
    header.innerHTML = width + 'x' + height; // For demo purposes
    header.style.setProperty('height', height + 'px')
    header.style.setProperty('width', width + 'px');
   //header.style.height = height + 'px';
   //header.style.width =width + 'px';
}

fiddle

Answer 2

这里有很多不同的问题：

• （至少在小提琴中）你试图 document.queryselect 在它存在之前的标题元素
• 您的调试代码通过设置document.body 覆盖了标题元素
• 您在设置高度和宽度时省略了单位（这曾经在“怪癖模式”下工作，但在现代文档类型中不起作用。）
• 您在尝试设置高度和宽度时添加了额外的双连字符

这是一个纠正这些问题的工作版本：

window.onresize = window.onload = function() {
  var header = document.querySelector('.header');

  // your original code used 'this.innerWidth' etc, which does work
  // (because the function is being run on the window object) but can
  // be confusing; may be better to refer to the window object 
  // explicitly:
  var width = window.innerWidth;
  var height = window.innerHeight;

  header.style.width = width + "px"; // need 'px' units
  header.style.height = height + "px";
  // the above is equivalent shorthand for
  // header.style.setProperty('height', window.innerHeight + 'px');
  // header.style.setProperty('width', window.innerWidth + 'px');

  // setting this inside the header, so we don't remove it in the process:
  header.innerHTML = width + "x" + height;
}

https://jsfiddle.net/pm7rgx4q/1/