엄격 모드에서 javascript가 작동하지 않는 CSS 속성 설정 중

Question

Javascript를 사용하여 CSS 속성을 수정하는 표준 준수 방법을 찾을 수 없다는 것을 인정하기 위해 당황했습니다. 또는 적어도, 다음과 같이 가정합니다 :

다음 코드 조각은 DOCTYPE 선언없이 Firefox/WebKit에서 제대로 작동하지만 지정된 doctype (HTML 4 또는 5)과 작동하지 않습니다.

<div id="canvasProxy"></div> 

및 그와 관련된 어떤 스타일이 없습니다 : 캔버스 프록시가 간단하게 정의

function setWindowSize(width, height) { 
    console.log("Syncing dimensions:",width,height);   // prints correct values 
    var container = document.getElementById('canvasProxy'); 
    console.log(container);          // prints valid element 
    console.log(container.style);        // prints valid object 
    container.style['width'] = width; 
    container.style['height'] = height; 
    console.log(container.style['width'], container.style['height']); // prints empty values 
} 

. 위의 코드는 DOM이로드 될 때까지 실행되지 않습니다.

style.setProperty 및 style.getPropertyCSSValue도 작동하지 않습니다. 그래서 .. 어땠어? 내가 미쳤어?

은 (내가 jQuery를이가 잘 처리 할 수 ​​있다는 걸거야,하지만 난이 특정 경우에 절대 최소한 페이지 크기를 유지하기 위해 노력하고있어.)

Answer 1

당신이 전달하는 값 무슨 말을하지 않습니다 , 또는 당신이 옳은 것으로 생각하는 것이지만, 의 정수인을 전달하고, 길이가이 아니라는 것을 알 수 있습니다.

CSS는 길이가 0 인 단위를 필요로합니다. 대부분의 브라우저는 단위를 지정하지 않으면 오류 복구 (CSS 사양과 직접적으로 모순 됨)를 수행하고 단위를 지정하지 않은 것으로 가정하지만 단점 모드에서만 오류를 복구합니다.

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $('canvasProxy').css('width', 300); 
    $('canvasProxy').css('height', 50); 
</script>