js-Methode, um die tatsächliche Breite und Höhe von HTML-Elementen zu ermitteln

Der folgende Editor stellt Ihnen eine js-Methode zur Verfügung, mit der Sie die tatsächliche Breite und Höhe von HTML-Elementen ermitteln können. Der Herausgeber findet es ziemlich gut, deshalb möchte ich es jetzt mit Ihnen teilen und es als Referenz für alle zur Verfügung stellen. Folgen wir dem Editor, um einen Blick darauf zu werfen

Der erste Fall ist, dass Breite und Höhe beide im Stylesheet geschrieben sind, z. B. #p1{width:120px;}. In diesem Fall kann die Breite nicht über #p1.style.width ermittelt werden, wohl aber über #p1.offsetWidth.

Der zweite Fall ist, dass Breite und Höhe inline geschrieben werden, z. B. style="width:120px;". In diesem Fall kann die Breite über die beiden oben genannten Methoden ermittelt werden.

Zusammenfassung: Da id.offsetWidth und id.offsetHeight unabhängig davon, ob der Stil im Stylesheet oder inline geschrieben ist, ist es am besten, diese beiden Attribute zu verwenden, wenn wir die Breite und Höhe des Elements erhalten. Beachten Sie, dass Attribute, die nicht im Inline-Stil geschrieben sind, nicht über id.style.atrr abgerufen werden können.

Heutzutage schreibt die Frontend-Produktion die Stile nur noch selten direkt im Stil. Sie sind alle im Stylesheet geschrieben. Wenn der Stil, den Sie erhalten möchten, keinen entsprechenden Stil hat (so wie #p1.style.width #p1.offsetWidth entspricht), können Sie die Attribute des Stylesheets nur separat abrufen, ohne den Browser zu verwenden. Sie können eine Suche versuchen für „JS Get Style“ Properties“ und dergleichen.

Code:

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度

Verwandte Empfehlungen:

js+html5 implementiert den seitenaktualisierbaren Countdown-Effekt

Das obige ist der detaillierte Inhalt vonjs-Methode, um die tatsächliche Breite und Höhe von HTML-Elementen zu ermitteln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!