Fehler mit Maßeinheiten in JavaScript

Oft ist es leicht, sich zu irren und die Maßeinheiten zu vergessen. Zum Beispiel so:

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

Richtig ist es, den Wert in Pixel anzugeben:

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

Stellen wir uns vor, wir wollen die Breite um einen bestimmten Wert erhöhen. Dazu müssen wir zuerst die Breite auslesen, dann die Zahl extrahieren, den gewünschten Wert dazuaddieren, 'px' hinzufügen und erst dann zurück schreiben:

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

Задание 1

Erklären Sie, was der Fehler im folgenden Code ist:

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

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

Задание 2

Erklären Sie, was der Fehler im folgenden Code ist:

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

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

Задание 3

Erklären Sie, was der Fehler im folgenden Code ist:

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

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

Задание 4

Gegeben ist ein Div:

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

Gegeben ist auch ein Button. Beim Klick auf den Button erhöhen Sie die Breite und Höhe des Divs um 50px.

Задание 5

Gegeben ist ein Div:

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

Gegeben ist auch ein Button. Beim Klick auf den Button erhöhen Sie die Breite und Höhe des Divs um 10%.