Ιδιότητα offsetWidth του στοιχείου HTML DOM

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

offsetWidth Η ιδιότητα επιστρέφει το ορατό πλάτος του στοιχείου (σε pixels), συμπεριλαμβανομένων των εσωτερικών περιθωρίων, περιφράσεων και γραμμών αναγνώρισης, αλλά όχι των εξωτερικών περιθωρίων.

offsetWidth Οι ιδιότητες είναι μονάδων ανάγνωσης.

Δείτε επίσης:Εκμάθηση του μοντέλου κουτίου CSS

offsetParent

Όλα τα στοιχεία κλάσης block αναφέρουν τις αποστάσεις σχετικά με τον απομακρυσμένο γονέα:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Ο απομακρυσμένος γονέας είναι ο πλησιέστερος προγονός με μη στατική θέση.

Αν δεν υπάρχει απομακρυσμένος γονέας, η απόσταση είναι σχετική με το κείμενο του έγγραφου.

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

Αντικείμενο offsetHeight

Αντικείμενο offsetParent

Αντικείμενο offsetTop

Αντικείμενο offsetLeft

Αντικείμενο clientTop

Αντικείμενο clientLeft

Αντικείμενο clientWidth

Αντικείμενο clientHeight

Παράδειγμα

Παράδειγμα 1

Αποτελείται η ύψος και το πλάτος του "myDIV", συμπεριλαμβανομένων των εσωτερικών περιθωρίων και περιφράσεων:

const elmnt = document.getElementById("myDIV");
let text = "Υψος με περιθώριο και περιφράδα: " + elmnt.offsetHeight + "px<br>";
text += "Πλάτος με περιθώρια και πλαίσια: " + elmnt.offsetWidth + "px";

Προσπάθησε να το δοκιμάσεις

Παράδειγμα 2

Η διαφορά μεταξύ clientHeight/clientWidth και offsetHeight/offsetWidth

Χωρίς μπλοκ ανασκόπησης:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Ύψος με περιθώρια: " + elmnt.clientHeight + "px<br>";
text += "Ύψος με περιθώρια και πλαίσια: " + elmnt.offsetHeight + "px<br>";
text += "Πλάτος με περιθώρια: " + elmnt.clientWidth + "px<br>";
text += "Πλάτος με περιθώρια και πλαίσια: " + elmnt.offsetWidth + "px";

Προσπάθησε να το δοκιμάσεις

Με μπλοκ ανασκόπησης:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Ύψος με περιθώρια: " + elmnt.clientHeight + "px<br>";
text += "Ύψος με περιθώρια, πλαίσια και μπλοκ ανασκόπησης: " + elmnt.offsetHeight + "px<br>";
text += "Πλάτος με περιθώρια: " + elmnt.clientWidth + "px<br>";
text += "Πλάτος με περιθώρια, πλαίσια και μπλοκ ανασκόπησης: " + elmnt.offsetWidth + "px";

Προσπάθησε να το δοκιμάσεις

Γλώσσα

element.offsetWidth

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

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

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

Όλοι οι περιηγητές υποστηρίζουν element.offsetWidth：

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