JavaScript에서의 측정 단위 오류

측정 단위를 잊어버리는 것은 쉽게 발생할 수 있는 실수입니다. 예를 들면 다음과 같습니다:

let width = 100;
elem.style.width = width; // 이런...

픽셀 단위로 값을 지정하는 것이 올바릅니다:

let width = 100;
elem.style.width = width + 'px';

너비를 특정 값만큼 증가시키고 싶다고 가정해 봅시다. 이를 위해서는 먼저 너비를 읽고, 숫자를 추출한 다음, 원하는 값을 더하고, 'px'을 추가한 후에야 비로소 다시 작성할 수 있습니다:

let widthPx = elem.style.width;
let widthNm = parseInt(widthPx);
elem.style.width = (widthNm + 30) + 'px';

다음 코드의 오류를 설명하세요:

<div style="font-size: 16px;">
	text
</div>

let elem = document.querySelector('div');
elem.style.fontSize = elem.style.fontSize + 2;

다음 코드의 오류를 설명하세요:

<div style="font-size: 16px;">
	text
</div>

let elem = document.querySelector('div');
elem.style.fontSize = parseInt(elem.style.fontSize + 2) + 'px';

다음 코드의 오류를 설명하세요:

<div style="font-size: 2.5em;">
	text
</div>

let elem = document.querySelector('div');
elem.style.fontSize = parseInt(elem.style.fontSize) + 2 + 'em';

다음 div가 있습니다:

<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
	text
</div>

버튼도 주어졌습니다. 버튼을 클릭하면 div의 너비와 높이를 50px만큼 증가시키세요.

다음 div가 있습니다:

<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
	text
</div>

버튼도 주어졌습니다. 버튼을 클릭하면 div의 너비와 높이를 10%만큼 증가시키세요.