javascript - 设置动态样式元素最干净的方法是什么？

Question

我希望我的网站能够扩展 <div>基于观看它的屏幕的分辨率。

我目前在一个函数中使用此代码，该函数在主体加载时运行(gameCanvas 是我所说的 <div>):

var WIDTH = window.screen.availWidth/2,
    HEIGHT = window.screen.availHeight/2;

var c = document.getElementById("gameCanvas");

c.setAttribute("style","width:"+WIDTH+"px;height:"+HEIGHT+"px");
    c.style.width=WIDTH;
    c.style.height=HEIGHT;

它完成了工作，但它也覆盖了我的 CSS样式表，它迫使我将所有样式信息放在 javascript 中，而不是将样式与逻辑分开。

有没有办法在 CSS 中动态确定这些参数，或者只更改这两个参数而不覆盖整个样式表？我已经试过了

  c.setAttribute("height", HEIGHT);
     c.setAttribute("width", WIDTH);

但它什么也不做，因为它们不是自己的属性。

编辑:我的样式表(现在它嵌入在 index.html 中，但它已经是 CSS 形式):

<style>
            body {
                background-color: black;
            }
            #gameCanvas {
                background-color: black;
                width: 800px;
                height: 600px;
                margin: auto;
                align: center;
            }
            #scoreboard {
                text-align: center;
                font-family: Segoe UI, Helvetica, Ubuntu, sans-serif;
                color: white;
            }
            #scores {
                font-size:600%; 
                padding:0; 
                margin:0;
                color: white;
            }
            #title {
                background-color: white;
                color: black;
            }
</style>

Answer 1

使用 JavaScript 是一种选择。作为替代方案，我将提供 2 个纯 CSS 解决方案。首先想到的有 2 个解决方案。

选项#1

第一个非常标准 - 将高度和宽度设置为 100%。这里需要注意的是每个父父容器也需要将它的高度和宽度设置为 100%。像这样:

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

main {
  width: 100%;
  height: 100%;
}

#gameCanvas {
  background-color: red;
  width: 100%;
  height: 100%;
}

<main>
  <div id="gameCanvas"></div>
</main>

选项#2

更优雅的解决方案是使用vw 和vh 单位。 vw 和 vh 单位分别等于视口(viewport)宽度和高度的 1%。所以 1vw 将是视口(viewport)宽度的 1%。要使元素全屏显示，您可以将宽度和高度分别设置为 100vw 和 100vh。像这样:

html,
body {
  margin: 0;
  padding: 0;
}

#gameCanvas {
  background-color: red;
  width: 100vw;
  height: 100vh;
}

<main><div id="gameCanvas"></div></main>