时间戳

首页 > 解决方案 > 使用 clientWidth 和 offsetWidth 读取 div 元素的宽度和高度时遇到问题

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

问题描述

我想动态调整画布元素的大小。我的页面分为两部分，左侧有一些设置，右侧有一个画布元素。由于页面可能会调整大小，因此画布元素应随之调整大小。到目前为止，我正在尝试使用 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%;
}

标签： javascriptcssgrid

解决方案

你确定canvas在你的js中定义了吗？也许给它一个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

推荐阅读