Heim > Artikel > Web-Frontend > Die Unterschiede zwischen scrollHeight, clientHeight und offsetHeight in verschiedenen Browsern
document.body ist der Hauptknoten im Document-Objekt im DOM und document.documentElement ist ein Verweis auf den Stammknoten (HTML) des Document-Objekts.
Die folgenden Inhalte wurden unter getestet, alle sind persönliche Testergebnisse~
Die Browserversionen sind: IE11, Firefox 53.0.3 (64-Bit), Chrome 58.0 . 3029.110 (64-Bit)
Js-Teilecode des Testprogramms:
1.Vergleich zwischen document.documentElement.scrollHeight und document.body.scrollHeight
Unter IE-Browser:
h1=document.documentElement.scrollHeight ; //Die tatsächliche Höhe des Inhalts unter dem HTML-Tag, einschließlich Rand, Rand und Abstand des Body-Tags; Die tatsächliche Höhe des Stils einschließlich der Polsterung unter dem Body-Tag, nicht einschließlich Rand und Rand des Body-Tags.
Berechnungsergebnis: h1=h2+oberer und unterer Rand (Rand des Körpers) + oberer und unterer Rand Rand (innerer Rand des Körpers);
Unter Firefox-Browser:
h1=document.documentElement.scrollHeight; //Die tatsächliche Höhe des Inhalts unter dem HTML-Tag, einschließlich des Randes, Rand , und Auffüllung des Body-Tags;
h2=document.body.scrollHeight; //body Die tatsächliche Höhe des Stils einschließlich der Auffüllung unter dem Tag, ohne Rand und Rand des Body-Tags;
Berechnungsergebnis: h1=h2+oberer und unterer Rand (Rand des Körpers) + oberer und unterer Rand (innerer Rand des Körpers);// Die Berechnungsmethode ist in beiden Firefox-Browsern gleich und IE-Browser. Die Berechnungsmethode im Chrome-Browser ist etwas anders
Unter Chrome-Browser:
h1=document.documentElement.scrollHeight; //Die tatsächliche Höhe des Inhalts unter dem HTML-Tag, einschließlich Rand, Rand und Polsterung des Body-Tags; h2=document.body.scrollHeight; 🎜>Berechnungsergebnis: h1=h2;
2.
document.documentElement.clientHeight und document .body.clientHeight Vergleich Under IE-Browser: h3=document.documentElement.clientHeight; //Die Höhe des sichtbaren Teils des Webinhalts ändert sich mit dem Browserfenster
h4=document.body.clientHeight; Die tatsächliche Höhe des Inhalts unter dem Body-Tag, einschließlich der Polsterung des Body-Tags, ohne Rand und Rand des Body-Tags
Unter Firefox-Browser:
h3= document.documentElement.clientHeight; //Die Höhe des sichtbaren Teils des Webinhalts ändert sich, wenn sich die Größe des Browserfensters ändert
h4=document.body.clientHeight; //Die tatsächliche Höhe des Inhalts unter dem Body-Tag, einschließlich der Auffüllung des Body-Tags, ohne Rand und Rand des Body-Tags
// Die Berechnungsmethode ist in beiden Firefox-Browsern gleich und IE-Browser. Die Berechnungsmethode im Chrome-Browser ist etwas anders: h3=document.clientHeight; //Die Höhe des sichtbaren Teils des Der Inhalt der Webseite ändert sich mit der Größe des Browserfensters
h4=document.body.clientHeight; //Die tatsächliche Höhe des Inhalts unter dem Body-Tag, einschließlich des Body-Tags. Der Rand und die Auffüllung sind nicht enthalten Rand des Body-Tags;
3. Vergleich von offsetHeight und document.body.offsetHeightUnter IE-Browser:
h5=document.documentElement.offsetHeight; //unter dem HTML-Tag Die tatsächliche Höhe des Inhalts, einschließlich Rand, Rand und Abstand des Body-Tags; 🎜> h6=document.body.offsetHeight; //Die tatsächliche Höhe des Inhalts unter dem Body-Tag, einschließlich Rand, Polsterung des Body-Tags, ohne Rand Berechnungsergebnis: h5=h6+margin (Body-Tag); Firefox-Browser: h5= document.documentElement.offsetHeight; //html-Tag Die tatsächliche Höhe des unteren Inhalts, einschließlich Rand, Rand und Abstand des Body-Tag;
h6=document.body.offsetHeight; );
// Die Berechnungsmethode ist im Firefox-Browser und im IE-Browser gleich, und die Berechnungsmethode des Chrome-Browsers ist etwas andersChrome-Browser Unten:
h5=document.documentElement.offsetHeight; //Die tatsächliche Höhe des Inhalts unter dem HTML-Tag, einschließlich Rand, Rand und Abstand des Body-Tags ;
h6=document.body.offsetHeight; //Die tatsächliche Höhe des Inhalts unter dem Body-Tag, einschließlich Rand und Abstand des Body-Tags, ohne Rand; h5=h6+margin (des Body-Tags);
Die oben genannten drei Browser,
Wenn der Rand des Body-Tags 0 ist, ist h5=h6;
Das obige ist der detaillierte Inhalt vonDie Unterschiede zwischen scrollHeight, clientHeight und offsetHeight in verschiedenen Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!