Fejl med måleenheder i JavaScript

Det er ofte nemt at lave fejl og glemme måleenheder. For eksempel sådan her:

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

Korrekt vil være at angive værdien i pixels:

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

Lad os forestille os, at vi ønsker at forøge bredden med en vis værdi. For at gøre dette skal vi først læse bredden, derefter udtrække tallet, lægge den ønskede værdi til, tilføje 'px' og først derefter skrive tilbage:

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

Forklar, hvad der er fejl i følgende kode:

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

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

Forklar, hvad der er fejl i følgende kode:

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

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

Forklar, hvad der er fejl i følgende kode:

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

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

Givet en div:

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

Der er også givet en knap. Ved klik på knappen skal du forøge bredden og højden på div'en med 50px.

Givet en div:

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

Der er også givet en knap. Ved klik på knappen skal du forøge bredden og højden på div'en med 10%.