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

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

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

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

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

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

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

Задание 1

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

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

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

Задание 2

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

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

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

Задание 3

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

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

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

Задание 4

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

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

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

Задание 5

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

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

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