JavaScript/DOM/HTMLElement/offsetWidth

Die Eigenschaft HTMLElement.offsetWidth speichert die Breite eines Elements.

Syntax

höhe = Element.offsetWidth();

• breite: ganzzahliger Wert in Pixel

Elementgröße berechnen ansehen …

  function getCSSValues(event) { 
		const element = event.target;
		console.log(element.id + 'Breite: ' + element.offsetWidth + '\nHöhe: ' + element.offsetHeight);		
		const compStyles = window.getComputedStyle(element);
		const pseudoCompStyles = window.getComputedStyle(element, 'first-letter');
		let textsize  = compStyles.getPropertyValue('font-size');
		let textcolor = compStyles.getPropertyValue('color');		
		let msg =  `Für das Pseudoelement sind die berechneten Werte für die Schriftgröße ${pseudoCompStyles.getPropertyValue('font-size')},\n` +
  `für die Textfarbe: ${pseudoCompStyles.getPropertyValue('color')}.`;
 
		document.getElementById('textsize').textContent = textsize;
		document.querySelector('#textcolor .text').textContent = textcolor;
		document.querySelector('#textcolor [role="decoration"]').style.backgroundColor = textcolor;
		document.getElementById('msg').textContent = msg;					
  }

Das Beispiel gibt die reale Höhe und Breite des Elements aus. Das Ergebnis ist die tatsächliche Anzeigehöhe des HTML-Elements.

Siehe auch

• JavaScript und CSS
  • Elementbox-Größen auslesen

Weblinks

• CSSWG: offsetWidth
• MDN: HTMLElement.offsetWidth