캔버스 너비를 클래스 너비로 설정

Question

CSS에 미리 정의 된 너비와 높이의 div가 여러 개 있습니다. 캔버스가이 div를 채우기를 원하지만 div의 크기에 따라 크기를 동적으로 변경하기를 원합니다. 내 HTML에서, 나는

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")); 
} 
} 

경고 디버깅을 위해서만이 난 사업부를 클릭 할 때 다음과 같은 기능을 실행, 각각의 캔버스 문서의 머리에서

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

를 사용하여 DIV 설정 이것은 실제로 projectContainer 클래스의 올바른 너비를 차지한다는 것을 알려줍니다. 그러나 함수를 호출하기 위해 div를 클릭하면 캔버스 너비가 $ (". projectContainer"). css ("width")에서 찾은 값이 아닌 0으로 설정됩니다. 왜 이럴 수 있니?

또한 간단한 질문을 위해 새 스레드를 만드는 것을 피하기 위해; div를 클릭하는 대신 문서를로드 할 때 함수가 자동으로 실행되도록하려면 어떻게해야합니까?

Answer 1

나는 이벤트의 크기를 조정하고 페이지로드 화재에 추가하는 코드를 업데이트했습니다

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()을 사용하는 것이지만 다른 방법이 있습니다.