Fel med måttenheter i JavaScript

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

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

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

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

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

Задание 1

Förklara felet i följande kod:

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

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

Задание 2

Förklara felet i följande kod:

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

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

Задание 3

Förklara felet i följande kod:

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

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

Задание 4

Given en div:

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

Задание 5

Given en div:

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