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

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

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

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

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

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

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

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

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

let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

Για το στοιχείο έχουν οριστεί τα ακόλουθα στυλ:

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

Πατώντας το κουμπί, εμφανίστε το πλάτος και το ύψος του στοιχείου.

Για το στοιχείο έχουν οριστεί τα ακόλουθα στυλ:

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

Πατώντας το κουμπί, αυξήστε το πλάτος και το ύψος του στοιχείου κατά δύο φορές.