Μέθοδος getComputedStyle()

  • Προηγούμενη σελίδα
  • Επόμενη σελίδα
  • Επιστροφή στο προηγούμενο επίπεδο Πρόσωπο Window

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

getComputedStyle() Η μέθοδος αποκτά τα υπολογισμένα CSS attributes και values του στοιχείου 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(element, pseudoElement)

Παράμετροι

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

Αποτελεσμα

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

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

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

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

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα
  • Επόμενη σελίδα
  • Επιστροφή στο προηγούμενο επίπεδο Πρόσωπο Window