Question

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

在每个div中建立画布

<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”）找到的值.css（“width”）。为什么会这样？

同样，为了避免为一个简单的问题创建一个新线程;如何在加载文档时自动运行该函数，而不是单击div？

Answer 1

我已更新代码以添加到resize事件并触发页面加载：

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.css（“width”）作为附加了“px”的字符串返回。使用parseInt()快速而肮脏的方式强制它只是一个数字，但还有其他方法可用。

设置画布宽度toe类的宽度

1 个答案: