Η συνάρτηση getComputedStyle

Η συνάρτηση getComputedStyle επιτρέπει την απόκτηση της τιμής οποιασδήποτε CSS ιδιότητας ενός στοιχείου, ακόμα και από CSS αρχείο.

Σύνταξη

let αντικείμενο = getComputedStyle(στοιχείο);

Λεπτομέρειες

Πώς λειτουργεί (προσοχή: όχι όπως θα περιμέναμε): ως παράμετρο δέχεται το στοιχείο, και επιστρέφει ένα αντικείμενο, που περιέχει όλες τις CSS ιδιότητες του περασμένου στοιχείου. Ας βάλουμε αυτό το αντικείμενο σε μια μεταβλητή style. Το όνομα είναι αυθαίρετο, είναι απλά μια μεταβλητή - όπως την ονομάσουμε, έτσι θα την προσκαλούμαστε:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // στο style βρίσκονται οι CSS ιδιότητες

Ας εμφανίσουμε, για παράδειγμα, το πλάτος. Αυτό γίνεται έτσι - style.width:

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

let style = getComputedStyle(elem);
console.log(style.width);

Για να εμφανίσουμε, για παράδειγμα, το αριστερό padding - κάνουμε έτσι - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Στο επόμενο παράδειγμα θα εμφανίσουμε όλες τις CSS ιδιότητες που μας ενδιαφέρουν για το στοιχείο μας:

<div id="elem">κείμενο</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // θα εμφανίσει '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // θα εμφανίσει '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // θα εμφανίσει 'solid'

Ανακρίβεια της getComputedStyle

Μερικές φορές η συνάρτηση getComputedStyle λειτουργεί όχι απολύτως σωστά με το πλάτος και το ύψος. Αυτό συμβαίνει επειδή το padding και το περίγραμμα διευρύνουν το μπλοκ. Στο επόμενο παράδειγμα στο μπλοκ έχει οριστεί πλάτος 200px, καθώς και περίγραμμα και border. Το πραγματικό πλάτος του μπλοκ είναι 300px, αλλά η getComputedStyle θα εμφανίσει ούτως ή άλλως 200px:

<div id="elem">κείμενο</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // θα εμφανίσει '200px'
console.log('height: ' + style.height); // θα εμφανίσει '200px'

Δηλαδή: προκύπτει ότι η getComputedStyle αγνοεί τη διεύρυνση του μπλοκ και δείχνει τα μεγέθη του σαν να μην υπήρχε αυτή η διεύρυνση. Αλλά αυτό δεν είναι το μόνο: επίσης έχει σημασία η παρουσία ή απουσία της γραμμής κύλισης - ορισμένα προγράμματα πλοήγησης αφαιρούν το πλάτος της γραμμής κύλισης από το πλάτος, που υπολογίστηκε μέσω της getComputedStyle, ενώ άλλα δεν αφαιρούν. Γενικά εδώ είναι εντελώς μη cross-browser και είναι καλύτερα να μη χρησιμοποιείται η getComputedStyle για τον προσδιορισμό πλάτους και ύψους, αλλά να χρησιμοποιούμε τις μετρήσεις, που θα μελετήσουμε παρακάτω.

Υπολογισμένες τιμές

Υπάρχει ακόμη μια απόχρωση: αν το πλάτος έχει οριστεί σε % - τότε μετά την εργασία της getComputedStyle θα δούμε το πλάτος σε px. Δηλαδή ουσιαστικά παίρνουμε όχι το ορισμένο πλάτος, αλλά το υπολογισμένο. Δείτε στο επόμενο παράδειγμα:

<div id="elem">κείμενο</div>

#elem {
	width: 30%; /* το πλάτος ορίζεται σε % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // θα εμφανίσει το πλάτος σε px

Δείτε επίσης

η ιδιότητα cssText,
που ορίζει μαζικά CSS στυλ