Fouten met meeteenheden in JavaScript

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

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

Correct is om de waarde in pixels aan te geven:

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

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

Leg uit wat de fout is in de volgende code:

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

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

Leg uit wat de fout is in de volgende code:

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

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

Leg uit wat de fout is in de volgende code:

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

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

Gegeven een div:

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

Gegeven een div:

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