표준 모드에서 요소 너비 또는 높이 설정

123

<div>표준 모드에서 JavaScript에서 HTML 요소 (예 :)의 너비 또는 높이를 설정할 수 있습니까?

다음 코드를 참고하십시오.

<html>
<script language="javascript" type="text/javascript">
    function changeWidth(){
        var e1 = document.getElementById("e1");
        e1.style.width = 400;
    } 
</script>
<body>
    <input type="button" value="change width" onclick="changeWidth()"/>
    <div id="e1" style="width:20px;height:20px; background-color:#096"></div>
</body>
</html>

사용자가 너비 변경 버튼을 누르면 <div>의 너비가 변경되어야합니다.

doctype 선언이 쿼크 모드를 결정할 때 잘 작동합니다. 표준 모드에서는 이런 식으로 요소의 크기를 변경할 수 없습니다.

표준 모드에서 요소의 크기를 조작 할 수 있습니까? 이 기능을 우회하는 방법?

— Rafalry
소스

191

너비 단위를 선언 해보세요.

e1.style.width = "400px"; // width in PIXELS

— 알렉산드르 페레즈
소스

1

아하하 .. 내 말은 "야옹"(c). 스타일이 적용되지 않는 이유를 알아 내려고 약 한 시간을 보냈습니다. 감사!

— Vitalii Vasylenko 2017

1

너비에 여백 box-sizing: border-box;이 포함되지 않고, 너비에 테두리가 포함되고 그렇지 않으면 너비에 테두리가 포함 되지 않음을 언급 할 가치가 있습니다.

— Qian Chen

39

style속성은 CSS 속성에 대한 값을 지정할 수 있습니다.

CSS width속성은 길이를 값으로 사용합니다.

길이에는 단위가 필요합니다. 쿼크 모드에서 브라우저는 길이 대신 정수를 제공하면 픽셀을 가정하는 경향이 있습니다. 단위를 지정하십시오.

e1.style.width = "400px";

— 쿠엔틴
소스