Ralat Unit Pengukuran dalam JavaScript

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

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

Cara yang betul adalah dengan menyatakan nilai dalam piksel:

javascriptlet 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:

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

Задание 1

Terangkan, apakah ralat dalam kod berikut:

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

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

Задание 2

Terangkan, apakah ralat dalam kod berikut:

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

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

Задание 3

Terangkan, apakah ralat dalam kod berikut:

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

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

Задание 4

Diberi div:

html<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.

Задание 5

Diberi div:

html<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%.