需要设置内联样式=“width：window.innerWidth”

Question

我想达到以下效果：

<div id='leftSide' style="width: window.innerWidth"> AS WIDE AS CLIENT WINDOW </div>

我认为不可能像上面那样编码。原因是，“window.innerWidth”是窗口对象的 Javascript 属性 - 我不知道如何在我的内联CSS中使用该值。

另外，我避免使用'onLoad（）'处理程序。我知道我可以添加一个onLoad（）处理函数来处理页面的body标签中的页面加载，然后使用我想要设置宽度的所有javascript。但我不喜欢在我的页面中使用onload处理程序。

那么是否有一些方式来访问我的内联CSS中的'window.innerWidth'值？

Answer 1

只需使用100vw宽度：

style="width:100vw"

vw表示相对于视口宽度。担心浏览器兼容性？请改用100%。但是如果它位于一个小容器中，使用vw会更好。

Answer 2

你尝试过这样的东西吗？

<script>
document.getElementById("leftSide").style.width=window.innerWidth;
</script>