Wie kann ich die Abmessungen eines HTML-Elements genau bestimmen?

So berechnen Sie die tatsächlichen Abmessungen eines HTML-Elements

Die genaue Bestimmung der Breite und Höhe eines HTML-Elements ist entscheidend, um es richtig auszurichten. In diesem Artikel werden verschiedene Techniken zum Abrufen tatsächlicher Abmessungen untersucht und Kompatibilitätsdetails für verschiedene Browser bereitgestellt.

.offsetWidth und .offsetHeight

Konzept: Diese Eigenschaften geben die Breite und Höhe von an ein Element, einschließlich Polsterung und Grenze.

Beispiel:

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

Browserunterstützung:Alle gängigen Browser

.getBoundingClientRect()

Konzept: Diese Methode gibt ein DOMRect-Objekt zurück, das verschiedene Dimensionen und enthält Koordinaten, einschließlich Breite und Höhe nach Anwendung von CSS-Transformationen.

Beispiel:

console.log(document.getElementById('foo').getBoundingClientRect())

Ausgabe:

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:

• Desktop-Browser: Chrome, Edge, Firefox, Safari
• Mobile Browser: Chrome für Android, iOS Safari

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