Μέθοδος getComputedStyle()

Ορισμός και χρήση

getComputedStyle() Η μέθοδος αποκτά τα υπολογισμένα CSS ιδιότητες και τιμές του στοιχείου HTML.

getComputedStyle() Η μέθοδος επιστρέφει το αντικείμενο CSSStyleDeclaration.

Υπολογισμένα στυλ

Υπολογισμένα στυλ αναφέρονται στα στυλ που χρησιμοποιούνται στο στοιχείο μετά την εφαρμογή όλων των πηγών στυλ.

Πηγή στυλ: εξωτερικές και εσωτερικές λίστες στυλ, κληρονομικές ρυθμίσεις και προεπιλεγμένα στυλ του προγράμματος περιήγησης.

Δείτε επίσης:

CSSStyleDeclaration Συστατικόν

Παράδειγμα

Παράδειγμα 1

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

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Προσπαθήστε να το κάνετε μόνοι σας

Παράδειγμα 2

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

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

Προσπαθήστε να το κάνετε μόνοι σας

Παράδειγμα 3

Αποκτήστε τον υπολογισμένο μέγεθος γραμματοσειράς της πρώτης γραμμής του στοιχείου (χρησιμοποιώντας το ψευδοστοιχείο):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Προσπαθήστε να το κάνετε μόνοι σας

Γλώσσα

window.getComputedStyle(στοιχείο, pseudoElement)

Παράμετροι

Παράμετροι Περιγραφή
στοιχείο Απαιτητικό. Το στοιχείο για το οποίο θέλετε να πάρετε τον υπολογισμένο στυλ.
pseudoElement Προαιρετικό. Το ψευδοστοιχείο που θέλετε να πάρετε.

Αποτελεσματική τιμή

Τύπος Περιγραφή
Όνειρο Ο αντικείμενος CSSStyleDeclaration που περιέχει όλες τις ιδιότητες και τις τιμές του CSS του στοιχείου.

Διαφορά μεταξύ της μεθόδου getComputedStyle() και της ιδιότητας style

Καταβάλλετε σύγκριση μεταξύ της μεθόδου getComputedStyle() και της ιδιότητας style του HTMLElement: η τελευταία επιτρέπει την πρόσβαση μόνο στις ενδογενείς ρυθμίσεις του στοιχείου, με οποιαδήποτε μονάδα που καθορίζετε και, δεν μπορεί να σας ενημερώσει για οποιαδήποτε πληροφορία σχετικά με τις ρυθμίσεις του στοιχείου στο στυλ της λίστας.

Υποστήριξη Περιηγητών

Όλοι οι περιηγητές υποστηρίζουν getComputedStyle()Ίσως

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη