Detaillierte Erklärung des Boxmodells in js

1.js-Boxmodell

bezieht sich auf das Erhalten der Stile von Elementen auf der Seite durch eine Reihe von Eigenschaften und Methoden, die in js bereitgestellt werden Wert

Beispiel:

#box hat viele eigene private Eigenschaften:

<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong>

Wenn es um das Box-Modell geht, denkt jeder zuerst an das CSS-Box-Modell. Das JS-Box-Modell bezieht sich auf das Erhalten des Stilinformationswerts der Elemente auf der Seite durch eine Reihe von Eigenschaften und Methoden, die in bereitgestellt werden JS.

Für ein #div (das viele eigene private Eigenschaften hat) ->HTMLElement.prototype->Element.prototype-> Knoten .prototype->EventTarget.prototype->Object.prototype

Im Folgenden sind einige JS-Methoden aufgeführt

1. Client-Serie (Mehrere private Attribute des aktuellen Elements)

　Die Breite und Höhe des Inhalts: Die von uns festgelegten Breiten-/Höhenstile sind der Inhalt . Breite und Höhe: Wenn der Höhenwert nicht festgelegt ist, passt sich die Höhe des Behälters an den Inhalt im Inneren an, sodass der erhaltene Wert der Höhe des tatsächlichen Inhalts entspricht, wenn die Höhe auf einen festen Wert eingestellt ist. Unabhängig davon, ob mehr oder weniger Inhalt vorhanden ist, beziehen wir uns tatsächlich auf die Höhe des Inhalts auf den eingestellten Wert.

Die Breite und Höhe des tatsächlichen Inhalts: Dies bezieht sich auf die Breite und Höhe des tatsächlichen Inhalts (nicht unbedingt auf die von uns festgelegte Höhe), z Beispiel: Die Höhe beträgt 200 Pixel. Wenn der Inhalt überläuft, wird die Höhe des tatsächlichen Inhalts um die Höhe des Überlaufinhalts

　clientWidth/clientHeight content Breite/Höhe + links/rechts/oben und unten Polsterung (hat nichts mit Inhaltsüberlauf zu tun)

　clientLeft:Die Breite des linken Randes clientTop:Die Breite der oberen Randhöhe (border[Left/Top]Width)

2. Offset-Serie

offsetWidth/offsetHeight : clientWidth/clientHeight+linker/rechter/oberer und unterer Rand (es hat nichts damit zu tun, ob der Inhalt überläuft)

　 offsetParent: die übergeordnete Referenz des aktuellen Elements

　offsetLeft/offsetTop: der Versatz des aktuellen Elements. Der Versatz des Randes vom inneren Rand des übergeordneten Referenzobjekts

3. Scroll-Serie

　scrollWidth/scrollHeight: genau das gleiche wie unser clientWidth/clientHeight (vorausgesetzt: der Inhalt im Container läuft nicht über) Wenn der Inhalt im Container überläuft, erhalten wir folgende Ergebnisse

　scrollWidth : die Breite des tatsächlichen Inhalts (einschließlich Überlauf) + linker Abstand

　 scrollHeigh: Die Höhe des tatsächlichen Inhalts (einschließlich Überlauf) + Füllen Sie die Oberseite aus. Die erhaltenen Ergebnisse sind alle ungefähr gleich dem Wert, weil: im selben Browser, ob wir festlegen overflow="hidden" hat einen Einfluss auf das Endergebnis; auch die in verschiedenen Browsern erzielten Ergebnisse sind unterschiedlich.

　scrollLeft/scrollTop: Die Breite und Höhe der Bildlaufleiste

　

2. Probleme mit den Attributwerten des JS-Box-Modells

　　我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；

三、关于操作浏览器本身的盒子模型信息

　　clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

　　scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）

　　我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套

　　document.documentElement[attr] || document.body[attr];

　　必须document.documentElement在前

　　例如document.documentElement.clientWidth ||  document.body.clientWidth

　　设置也需要写两套

　　编写一个有关于操作浏览器盒子模型的方法 ，代码如下　

//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
            }//设置document.documentElement[attr] = value;
            document.body[attr] = value
        }

　　

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Boxmodells in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!