使用 clientWidth 和 offsetWidth 读取 div 元素的宽度和高度时遇到问题

Question

我想动态调整画布元素的大小。我的页面分为两部分，左侧有一些设置，右侧有一个画布元素。由于页面可能会调整大小，因此画布元素应随之调整大小。 到目前为止，我正在尝试使用 CSS 网格和一个事件监听器来实现这一点，它会在每次调整窗口大小时调整画布元素的大小。

现在来看实际问题：当我将画布宽度和高度设置为 CanvasContainer 的宽度和高度（在事件监听器运行的函数中）时，CanvasContainer div 没有正确调整大小。事实上，当我使窗口的宽度变小时，div 的宽度会增加。如果我留下这两行 CanvasContainer div 会按预期调整大小。

HTML：

<div class="Container">
    <div class="Control">
        <input id="StateCodeText" type="text" placeholder="State code">
        <br>
        <input id="StateOutputText" type="text" placeholder="State output">
        <br>
       <button id="NewStateButton">New state</button> 
    </div>

    <div class="CanvasContainer">
        <canvas></canvas>
    </div>   
</div>

Javascript：

let CanvasContainer = document.querySelector(".CanvasContainer");
Resize();

window.addEventListener("resize", Resize);

function Resize() {
   canvas.width = CanvasContainer.clientWidth;
   canvas.height = CanvasContainer.clientHeight; 
}

CSS：

.Container {
    display: grid;
    grid-template-columns: 1fr 8fr;
    height: 100%;
}

.CanvasContainer {
    border: 2px solid rgb(255, 0, 13);
    width: 100%;
    height: 100%;
}

Answer 1

你确定在你的 js 中定义了canvas 吗？也许给它一个 id

<canvas id=canvas'></canvas>然后定义

const canvas = document.getElementById('canvas')

但也许这种方法无论如何都不是最好的。 css 网格将确保自行调整所有元素的大小。到目前为止，似乎也不需要画布容器。那么怎么样呢

<div class="Container">
   <div class="Control">
      ...   
   </div>
   <canvas id='canvas'></canvas>
</div>

还有一些CSS

.Container {
    display: grid;
    grid-template-columns: 1fr 8fr;
    height: 100%;
}

#canvas {
    border: 2px solid rgb(255, 0, 13);
    width: 100%;
    height: 100%;
}

如果您确实需要画布的当前大小，您可以随时访问它

const width = document.getElementById('canvas').getBoundingClientRect().width