Μονάδες μέτρησης στο χαρακτηριστικό style στην JavaScript
Όταν καθορίζουμε τιμές ιδιοτήτων
μέσω του χαρακτηριστικού style πρέπει
να καθορίζουμε τις μονάδες μέτρησης:
javascriptelem.style.width = '100px';
Κατά την ανάγνωση των τιμών, αυτές θα λαμβάνονται επίσης με τις μονάδες μέτρησης:
javascriptlet width = elem.style.width;
console.log(width); // θα εμφανίσει '100px';
Εάν χρειαστεί, μπορούμε να απαλλαγούμε
από τις μονάδες μέτρησης χρησιμοποιώντας τη parseInt:
javascriptlet width = elem.style.width;
console.log(parseInt(width)); // θα εμφανίσει 100
Εάν προβλέπονται κλασματικές τιμές,
μπορούμε να χρησιμοποιήσουμε τη συνάρτηση parseFloat:
javascriptlet width = elem.style.width;
console.log(parseFloat(width));
Δίνεται ένα div και ένα κουμπί. Με κλικ στο κουμπί
ορίστε στο div πλάτος 400px,
και ύψος 300px.
Δίνεται ένα div:
html<div id="elem" style="width: 300px; height: 200px;">
text
</div>
Δίνεται επίσης ένα κουμπί. Με κλικ στο κουμπί εμφανίστε το πλάτος και το ύψος του div χωρίς τις μονάδες μέτρησης.
Δίνεται ένα div:
html<div id="elem" style="font-size: 1.5em;">
text
</div>
Δίνεται επίσης ένα κουμπί. Με κλικ στο κουμπί εμφανίστε το μέγεθος γραμματοσειράς του div χωρίς μονάδες μέτρησης.