將畫布寬度設置爲類寬度

我在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？

來源

2015-01-17 GtwoK

我已經更新的代碼添加到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();

的原因，寬度不設置是帆布取整數爲寬度值，而jQuery.css（「width」）作爲一個字符串返回，並附有「px」。將其強制爲一個數字的一種快速且骯髒的方法是使用parseInt()，但還有其他方法可用。

來源

2015-01-17 01:15:33

啊，我從來沒有想到這一點，謝謝一堆！我之前沒有處理過自調用函數 - 因爲它放置在文檔頭部，它不會不斷調整畫布的大小以匹配div，是嗎？我怎麼能做到這一點？ – GtwoK

啊，你需要將它附加到一個調整大小的函數，以便在瀏覽器調整大小時觸發它。我會更新我的例子。 –

@GtwoK更新了調整大小的代碼（調整大小時有一個反彈，這不是100％必要的，但通常被認爲是一種好的做法）。 –

將畫布寬度設置爲類寬度

回答

相關問題