Javascript 将画布宽度设置为类的宽度

我在CSS中建立了多个预定义宽度和高度的div。我想要一个画布来填充这些div，但我也想要它根据div的大小动态地改变大小。在我的html中，我使用

<canvas class="canvases" width="100" height="100"></canvas>

在文档的开头，我在单击div时运行以下函数

function establishCanvases() {
 canvas = document.getElementsByClassName('canvases');
 var i;
 for (i = 0; i < canvas.length; i++) {
     canvas[i].width = $(".projectContainer").css("width");
     alert (i + " " + $(".projectContainer").css("width"));
 }
}

该警报仅用于调试目的。它让我知道它确实获取了projectContainer类的正确宽度。但是，当我单击div调用函数时，画布宽度设置为0，而不是它在$.projectContainer.csswidth处找到的值。为什么会这样

---

同样，为了避免为一个简单的问题制造新的线索；如何使函数在加载文档时自动运行，而不是单击div？

我已更新了代码，以添加调整事件大小并在页面加载时触发：

var setCanvasSize = function(){
  canvas = document.getElementsByClassName('canvases');
   var i;
   for (i = 0; i < canvas.length; i++) {
     canvas[i].width = parseInt($(".projectContainer").css("width"));
     alert (i + " " + $(".projectContainer").css("width"));
   }
};

var timer;
//add to window resize event
$(window).resize(function(){
   clearTimeout(timer);
   setTimeout(setCanvasSize, 100);
});
//fire on page load
setCanvasSize();

---

未设置宽度的原因是，canvas将整数作为宽度值，而jQuery.csswidth作为附加了px的字符串返回。一种快速而肮脏的方法是使用parseInt将其强制为一个数字，但是还有其他可用的方法。

Ahh，我从来没有想过，非常感谢！我以前没有处理过自调用函数，因为它被放在文档头中，它不会不断调整画布的大小以匹配div，是吗？我怎样才能让它做到这一点呢？啊，你需要将它附加到一个调整大小的函数，以便在浏览器调整大小时启动它。我将更新我的示例。@GtwoK用resize更新了代码。resize上有一个非100%必要的去抖动，但通常被认为是一个好的做法。