Σφάλματα με μονάδες μέτρησης στο JavaScript

Συχνά είναι εύκολο να κάνουμε λάθος και να ξεχάσουμε τις μονάδες μέτρησης. Για παράδειγμα, έτσι:

let width = 100;
elem.style.width = width; // ωχ...

Σωστά είναι να καθορίσουμε την τιμή σε pixels:

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

Ας φανταστούμε ότι θέλουμε να αυξήσουμε το πλάτος κατά μια συγκεκριμένη τιμή. Για αυτό πρέπει πρώτα να διαβάσουμε το πλάτος, μετά να εξαγάγουμε τον αριθμό, να προσθέσουμε σε αυτόν την επιθυμητή τιμή, να προσθέσουμε 'px' και μόνο τότε να το γράψουμε πίσω:

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

Εξηγήστε, πού είναι το λάθος στον ακόλουθο κώδικα:

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

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

Εξηγήστε, πού είναι το λάθος στον ακόλουθο κώδικα:

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

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

Εξηγήστε, πού είναι το λάθος στον ακόλουθο κώδικα:

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

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

Δίνεται ένα div:

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

Δίνεται επίσης ένα κουμπί. Με κλικ στο κουμπί αυξήστε το πλάτος και το ύψος του div κατά 50px.

Δίνεται ένα div:

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

Δίνεται επίσης ένα κουμπί. Με κλικ στο κουμπί αυξήστε το πλάτος και το ύψος του div κατά 10%.