Fejl med måleenheder i JavaScript

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

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

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

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

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

Задание 1

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

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

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

Задание 2

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

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

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

Задание 3

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

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

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

Задание 4

Givet en div:

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

Задание 5

Givet en div:

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