Wie erhalte ich die wahre Breite und Höhe eines HTML-Elements?

Bestimmen der tatsächlichen Breite und Höhe eines HTML-Elements

Um ein HTML-Element im Ansichtsfenster des Browsers zu zentrieren, ist eine genaue Berechnung erforderlich seine Dimensionen. So können Sie die tatsächliche Breite und Höhe eines Elements effizient abrufen.

Elementeigenschaften verwenden

Die Eigenschaften .offsetWidth und .offsetHeight der HTMLElement-Schnittstelle stellen die tatsächliche Breite dar bzw. Höhe eines Elements. Beachten Sie, dass diese Eigenschaften Teil des Elements und nicht seines .style-Objekts sind.

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

Verwendung von getBoundingClientRect()

Alternativ kann die Methode getBoundingClientRect() verwendet werden Wird verwendet, um die Abmessungen und die Position eines Elements im Ansichtsfenster als Gleitkommazahlen zu erhalten. Dazu gehören die Position, Breite und Höhe des Elements nach der Anwendung von CSS-Transformationen.

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

// Output:
// DOMRect {
//   ...
//   width: 631,  // Element's width in pixels
//   height: 54.7, // Element's height in pixels
//   ...
// }

Browser-Unterstützung

Beide Techniken werden in modernen Browsern unterstützt. einschließlich:

• Chrome
• Firefox
• Edge
• Safari
• Opera

Das obige ist der detaillierte Inhalt vonWie erhalte ich die wahre Breite und Höhe eines HTML-Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!