Wie kann man die Abmessungen von HTML-Elementen genau bestimmen?

Bestimmen der tatsächlichen Abmessungen von HTML-Elementen

Beim Versuch, ein HTML-Element im Ansichtsfenster des Browsers auszurichten, ist es wichtig, es genau zu ermitteln tatsächliche Breite und Höhe. Dies erfordert die Nutzung spezifischer Eigenschaften und Funktionen, die von verschiedenen Browsern unterstützt werden.

.offsetWidth und .offsetHeight

Um die Breite und Höhe eines Elements ohne Berücksichtigung von CSS-Transformationen zu bestimmen, verwenden Sie die Eigenschaften .offsetWidth und .offsetHeight. Auf diese Eigenschaften kann im Gegensatz zu .style direkt am Element zugegriffen werden.

var width = document.getElementById('foo').offsetWidth;

getBoundingClientRect()

Die Funktion .getBoundingClientRect() bietet eine genauere Auslesung eines Abmessungen und Position des Elements, nachdem CSS-Transformationen angewendet wurden. Es gibt Gleitkommazahlen zurück, die die folgenden Attribute angeben:

console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Browser-Unterstützung

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

Das obige ist der detaillierte Inhalt vonWie kann man die Abmessungen von HTML-Elementen genau bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!