Javascript输出为内联样式的纯值

Question

我想将视口宽度写成div内联样式，如此。

<div style="width:[viewportwidth]">stuff here</div>

内联样式应在视口更改时更改，即如果我调整浏览器宽度，样式将相应地实时更改。

我有一些写入视口的js，但它需要一个用于document.write的ID，因此需要一些带有该ID的HTML元素。我无法弄清楚如何实时获取视口宽度作为值，以便可以在样式中使用。

Answer 1

window.addEventListener('resize', function(event){
  var viewportWidth = this.outerWidth;
});

然后您可以将viewportWidth变量应用于div的样式属性。

但是，使用CSS vw单位可能会更好。

div{
   width:100vw;
}

这是视口宽度的100％。