Ανάγνωση ιδιοτήτων από αρχεία CSS σε JavaScript

Οι ιδιότητες που ορίζονται σε ένα αρχείο CSS μπορούν να διαβαστούν χρησιμοποιώντας μια ειδική συνάρτηση getComputedStyles.

Ας δούμε πώς γίνεται αυτό. Ας υποθέσουμε ότι έχουμε το ακόλουθο στοιχείο:

html<div id="elem">
  text
</div>

Ας υποθέσουμε ότι για αυτό το στοιχείο έχουν οριστεί τα ακόλουθα στυλ:

css#elem {
  width: 100px;
  color: red;
  font-size: 20px;
}

Ας πάρουμε μια αναφορά στο στοιχείο σε μια μεταβλητή:

javascriptlet elem = document.querySelector('#elem');

Τώρα ας περάσουμε την αναφορά στο στοιχείο που λάβαμε ως παράμετρο στη συνάρτηση getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Ως αποτέλεσμα, θα λάβουμε ένα αντικείμενο που περιέχει τις τιμές των ιδιοτήτων CSS για το στοιχείο μας. Ας το χρησιμοποιήσουμε για να διαβάσουμε, για παράδειγμα, το χρώμα:

javascriptconsole.log(computedStyle.color); // θα εμφανίσει 'red'

Και τώρα το πλάτος:

javascriptconsole.log(computedStyle.width); // θα εμφανίσει '100px'

Και τώρα το μέγεθος της γραμματοσειράς:

javascriptconsole.log(computedStyle.fontSize); // θα εμφανίσει '20px'

css#elem {
  width: 200px;
  height: 200px;
}

css#elem {
  width: 200px;
  height: 200px;
}