Ralat Unit Pengukuran dalam JavaScript

Sering kali mudah tersilap dan lupa tentang unit pengukuran. Contohnya, seperti ini:

let width = 100;
elem.style.width = width; // aduh...

Cara yang betul adalah dengan menyatakan nilai dalam piksel:

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

Bayangkan kita ingin menambah lebar dengan suatu nilai. Untuk itu kita perlu membaca lebarnya terlebih dahulu, kemudian ekstrak nombornya, tambahkan nilai yang dikehendaki kepadanya, tambahkan 'px' dan hanya kemudian tulis semula:

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

Terangkan, apakah ralat dalam kod berikut:

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

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

Terangkan, apakah ralat dalam kod berikut:

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

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

Terangkan, apakah ralat dalam kod berikut:

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

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

Diberi div:

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

Diberi juga butang. Apabila klik butang tambahkan lebar dan tinggi div sebanyak 50px.

Diberi div:

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

Diberi juga butang. Apabila klik butang tambahkan lebar dan tinggi div sebanyak 10%.