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:

#one{border : 10px solid black; padding:5px; margin:10px;} /*Dieser Test basiert auf dem Body-Tag-Stil auf der linken Seite, einer davon ist die ID des Body-Tags*/ </style&gt ;

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.

d ocument.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.offsetHeight

Unter 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 anders Chrome-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;