Fehler mit Maßeinheiten in JavaScript

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

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

Richtig ist es, den Wert in Pixel anzugeben:

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

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

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

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

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

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

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

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

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

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

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

Gegeben ist ein Div:

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

Gegeben ist ein Div:

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