在 Javascript 中設置文章的寬度不會更新

Question

我有一個 canvas 和聊天的代碼：

<section id="main_section">
        <article id="GL">
            <canvas id="GL-Surface">

            </canvas>
        </article>

        <article id="chat">
            <script src="chat.js"></script>
        </article>
</section>

我想設置聊天的寬度和高度。 它在 CSS 中設置時有效，但我想更改 Javascript 內部聊天的大小，因為 canvas 可能會變大。 我使用這些命令來設置大小：

document.getElementById("chat").width = w;
document.getElementById("chat").height = h;

但聊天不會改變大小。 這些行用於更改包含 canvas 的文章的大小。 打印出document.getElementById("chat").width返回正確的值，這很奇怪。

發生了什么，相同的命令僅適用於某些對象？

Answer 1

Since you have set the width and height in your CSS, you can only modify the style properties of the canvas to change it, ie canvas.style.width and canvas.style.height .

 const canvas = document.querySelector('canvas'); canvas.style.width = "500px";

 canvas { width: 200px; height: 200px; background-color: dodgerblue; }

 <canvas></canvas>

Answer 2

<script>標簽不屬於那里——它可能知道#gl元素是什么，但如果腳本在#chat通過關閉文章標簽定義之前執行，它可能不知道#chat是什么。

將其移動到身體的底部。