Die ausführlichste Erläuterung der Grundeigenschaften des JS-Box-Modells (Bild- und Textbeispiele)

In diesem Artikel werden die grundlegenden Eigenschaften des JS-Box-Modells anhand von Bildern und Texten erläutert: clientWidth/Height, offsetWidth/Height, offsetTop/Left, scrollWidth/Height, scrollTop/Left, ich hoffe, das wird der Fall sein Helfen Sie, wenn Sie es brauchen. Freunde helfen! „Schreiben Sie eine JS-Box.“ 2) clientHeight: Inhaltshöhe + obere und untere Polsterung ​​die Box

(1) offsetWid th: clientWidth+ linker und rechter Rand

(2) offsetHeight: clientHeight+ oberer und unterer Rand

offsetParent: Holen Sie sich sein übergeordnetes Referenzobjekt (nicht unbedingt das übergeordnete Element)

Finden Sie das übergeordnetes Referenzobjekt:

(1) In derselben Ebene ist das äußerste Element die übergeordnete Referenz aller untergeordneten Elemente.

(2) Basierend auf der Position: absolut/relativ/fest, wird das Element aus dem Dokumentfluss gelöst und wird eine neue Ebene, wodurch die übergeordnete Referenz des Elements geändert wird.

(3) Das übergeordnete Referenzobjekt des Körpers ist null. ?? Ja Die tatsächliche Breite und Höhe innerhalb des Ansichtsfensters
• (1) Wenn kein Inhaltsüberlauf vorliegt: scrollWidth/Height = clientWidth/Height

  (2) Wenn ein Überlauf vorliegt, ist das Ergebnis ungefähr gleich der Breite und Höhe des tatsächlichen Inhalts der Box: oberer und unterer Abstand + Breite und Höhe des tatsächlichen Inhalts ;
  (3) Solange ein Überlauf auftritt, ändert der Wert des Überlaufs in gewissem Maße auch das Ergebnis des Bildlaufs.
  
  

• scrollTop / scrollLeft: Die Höhe/Breite der vertikalen/horizontalen Bildlaufleistenkrümmung

  
  

  Hinweis: Von den oben genannten Attributen können nur scrollLeft und scrollTop Werte festlegen, andere Attribute sind schreibgeschützt

• 
  
  
  Verwandte Empfehlungen: [

  JavaScript-Video-Tutorial
]

Das obige ist der detaillierte Inhalt vonDie ausführlichste Erläuterung der Grundeigenschaften des JS-Box-Modells (Bild- und Textbeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!