Fouten met meeteenheden in JavaScript

Het is vaak makkelijk om een fout te maken en de meeteenheden te vergeten. Bijvoorbeeld zo:

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

Correct is om de waarde in pixels aan te geven:

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

Stel je voor dat we de breedte willen vergroten met een bepaalde waarde. Hiervoor moeten we eerst de breedte uitlezen, daar het getal uit halen, de gewenste waarde erbij optellen, 'px' toevoegen en pas daarna terugschrijven:

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

Задание 1

Leg uit wat de fout is in de volgende code:

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

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

Задание 2

Leg uit wat de fout is in de volgende code:

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

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

Задание 3

Leg uit wat de fout is in de volgende code:

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

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

Задание 4

Gegeven een div:

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

Ook gegeven een knop. Bij klik op de knop verhoog de breedte en hoogte van de div met 50px.

Задание 5

Gegeven een div:

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

Ook gegeven een knop. Bij klik op de knop verhoog de breedte en hoogte van de div met 10%.