Wie kann ich die Breite und Höhe eines HTML-Elements für eine präzise Zentrierung ermitteln?

Berechnung der Breite und Höhe eines HTML-Elements für die Zentrierung

Um ein HTML-Element in der Anzeige des Browsers zu zentrieren, ist die Bestimmung seiner tatsächlichen Breite und Höhe von entscheidender Bedeutung. So erreichen Sie das:

1. .offsetWidth- und .offsetHeight-Eigenschaften

Sie können die Offset-Breite und -Höhe des Elements abrufen mit:

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

2. .getBoundingClientRect()-Funktion

Diese Funktion liefert detailliertere Informationen über die Abmessungen und die Position des Elements und berücksichtigt CSS-Transformationen:

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

/* Output:
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:

• .offsetWidth und .offsetHeight:Alle gängigen Browser (IE8)
• .getBoundingClientRect():Alle gängigen Browser (IE9)

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite und Höhe eines HTML-Elements für eine präzise Zentrierung ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!