Javascript输出为内联样式的普通值

我想将视口宽度写入div内联样式，如下所示

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

这里的东西

内联样式应随着视口的更改而更改，即如果调整浏览器宽度，样式将实时相应更改

我有一些编写视口的js，但它需要document.write的ID，因此需要一些具有该ID的HTML元素。我不知道如何实时获取视口宽度作为值，以便在样式中使用

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

然后可以将

viewportWidth

变量应用于div的style属性

但是，使用CSS

vw

单元可能会更好

div{
   width:100vw;
}

这是视口宽度的100%