Question

我正在尝试在HTML / JS中创建一些标志，每个标志位于一个单独的画布上。我希望能够同时更改所有画布的高度和宽度，但此刻我必须单独更改它们，这非常耗时。感谢任何帮助，提前谢谢。

当前代码：

<canvas id="myCanvas1" width="500" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<canvas id="myCanvas2" width="500" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

等...

Answer 1

您可以使用css

<强> CSS

.mycanvas
{
   width:500px;
   height:300px;
   border:1px solid #c3c3c3;
}

<强> HTML

<canvas id="myCanvas2" class="mycanvas">
  Your browser does not support the canvas element.
</canvas>

<强> JS

//get all canvas by classname
var canvas = document.getElementsByClassName("mycanvas"); 

//cicle all canvas 
for(var i=0;i<canvas.length;i++){
    // set new values
    canvas[i].style.height = "150px";
    canvas[i].style.width= "250px";
}

在HTML中多次使用一个值

1 个答案: