Fel med måttenheter i JavaScript

Det är lätt att göra fel och glömma måttenheter. Till exempel så här:

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

Rätt är att ange värdet i pixlar:

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

Föreställ dig att vi vill öka bredden med ett visst värde. För att göra det måste vi först läsa bredden, sedan extrahera talet, addera det önskade värdet, lägga till 'px' och först då skriva tillbaka det:

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

Förklara felet i följande kod:

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

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

Förklara felet i följande kod:

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

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

Förklara felet i följande kod:

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

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

Given en div:

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

Given även en knapp. Vid klick på knappen öka bredden och höjden på diven med 50px.

Given en div:

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

Given även en knapp. Vid klick på knappen öka bredden och höjden på diven med 10%.