Foute met meeteenhede in JavaScript

Dit is maklik om 'n fout te maak en die meeteenheid te vergeet. Byvoorbeeld, so:

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

Die korrekte manier is om die waarde in pixels te spesifiseer:

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

Stel ons voor dat ons die breedte met 'n sekere waarde wil vergroot. Om dit te doen, moet ons eers die breedte lees, dan die nommer uittrek, die benodigde waarde daarby tel, 'px' byvoeg en eers dan terugskryf:

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

Задание 1

Verduidelik wat die fout is in die volgende kode:

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

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

Задание 2

Verduidelik wat die fout is in die volgende kode:

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

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

Задание 3

Verduidelik wat die fout is in die volgende kode:

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

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

Задание 4

Daar is 'n div:

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

Daar is ook 'n knoppie. Met 'n klik op die knoppie, verhoog die breedte en hoogte van die div met 50px.

Задание 5

Daar is 'n div:

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

Daar is ook 'n knoppie. Met 'n klik op die knoppie, verhoog die breedte en hoogte van die div met 10%.