通过 javascript 设置 css 变量

Question

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

这是我当前的代码：

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

上面的代码在 body 上显示了宽度和高度，现在是时候将它添加到 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
}

我知道代码不正确，但我找不到任何示例进行比较，这里有一个 fiddle 以防代码不够用。

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

您在这里遇到了许多不同的问题：

（至少在 fiddle 中）您试图 document.queryselect header 元素存在之前
您的调试代码通过设置 document.body
您在设置高度和宽度时省略了单位（这在 "quirks mode" 中有效，但在现代文档类型中无效。）
您在尝试设置高度和宽度时添加了额外的双连字符

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

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/

通过 javascript 设置 css 变量

setting a css variable via javascript

javascript

css-variables