通过javascript设置一个css变量

-1

我想获取浏览器窗口的高度和宽度，并将其显示在主体上以及更改高度以匹配。通过javascript设置一个css变量

这里是我当前的代码：

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

上面的代码显示在机身的宽度和高度确定，现在是时候将它添加到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/

来源

2017-07-17 Dan

你在控制台看......？ 'header'是'null'。您已将代码放入''中，无需等待文档加载，因此选择器将无法找到它们的元素。您也正在重新调整''的大小，从而完全删除您的“标题”元素。 – Santi

抱歉，我是javascript新手。不明白为什么这是null，如果我使用document.getElementById（“header”）并将该类更改为div上的id并替换该行，则header.style.setProperty（' - height'，height）;与document.getElementById（“header”）。style.setProperty（' - height'，height）;我认为虽然我的尺寸仍然没有变化 – Dan

在JSFiddle中，您已将代码设置为嵌入*“不包装在”*中，这意味着它将嵌入在您的页面头部的'

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

来源

2017-07-17 14:10:23

在这种情况下，我并不是downvoter，但这是我经常做的* do * downvote的答案：它只是一个代码转储，没有解释原始代码的错误。 –

提问者只是要求比较的代码。让他通过询问来学习。 –

我不同意这很有帮助，@FazalRasel，但这就是为什么有一个upvote/downvote系统首先：我们都得到投票，什么构成一个好的答案。 –

通过javascript设置一个css变量

相关问题