offsetTop
Ruft die berechnete obere Position des Objekts relativ zum Layout oder zu den übergeordneten Koordinaten ab, die durch die Eigenschaft offsetParent angegeben werden.
offsetLeft
Ruft die berechnete linke Position des Objekts relativ zum Layout oder den übergeordneten Koordinaten ab, die durch die Eigenschaft offsetParent angegeben werden.
offsetHeight
Ruft die Höhe des Objekts relativ zum Layout oder zur übergeordneten Koordinate ab, die durch die Eigenschaft offsetParent angegeben wird.
IE und Opera gehen davon aus, dass offsetHeight = clientHeight + Bildlaufleiste + Rand.
NS und FF betrachten offsetHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann.
offsetWidth
Ruft die Breite des Objekts relativ zum Layout oder zur übergeordneten Koordinate ab, die durch die Eigenschaft offsetParent angegeben wird.
offsetParent
Ruft einen Verweis auf das Containerobjekt ab, das die Eigenschaften offsetTop und offsetLeft des Objekts definiert.
clientHeight
Ruft die Höhe eines Objekts ab, ohne Ränder, Rahmen, Bildlaufleisten oder Auffüllungen zu zählen, die möglicherweise auf das Objekt angewendet werden.
Jeder hat keine Einwände gegen clientHeight. Sie alle denken, dass es sich um die Höhe des sichtbaren Bereichs des Inhalts im Seitenbrowser handelt ist der Bereich unterhalb der letzten Symbolleiste und oberhalb der Statusleiste. Er hat nichts mit dem Inhalt der Seite zu tun.
clientLeft
Ruft den Abstand zwischen der offsetLeft-Eigenschaft und der tatsächlichen linken Seite des Clientbereichs ab.
clientTop
Ruft den Abstand zwischen der Eigenschaft offsetTop und der tatsächlichen Oberseite des Clientbereichs ab.
clientWidth
Ruft die Breite eines Objekts ab, ohne eventuell auf das Objekt angewendete Ränder, Rahmen, Bildlaufleisten oder Abstände zu zählen.
SCROLL-Attribut
scrollen
Legt fest oder ruft ab, ob das Scrollen deaktiviert ist.
scrollHeight
Ermitteln Sie die Bildlaufhöhe des Objekts.
scrollLeft
Legt den Abstand zwischen dem linken Rand des Objekts und dem äußersten linken Rand des aktuell sichtbaren Inhalts im Fenster fest oder ruft ihn ab.
scrollTop
Legt den Abstand zwischen der Oberkante des Objekts und der Oberkante des sichtbaren Inhalts im Fenster fest oder ruft ihn ab.
scrollWidth
Ruft die Bildlaufbreite des Objekts ab. Ereignisattribut
X
Legt die x-Pixel-Koordinate der Mauszeigerposition relativ zum übergeordneten Dokument fest oder ruft sie ab.
screenX
Legt die x-Koordinate der Mauszeigerposition relativ zum Bildschirm des Benutzers fest oder ruft diese ab
offsetX
Legt die X-Koordinate der Mauszeigerposition relativ zum Objekt fest, das das Ereignis ausgelöst hat, oder ruft sie ab.
clientX
Legt die x-Koordinate der Mauszeigerposition relativ zum Clientbereich des Fensters fest oder ruft diese ab, wobei der Clientbereich nicht die eigenen Steuerelemente und Bildlaufleisten des Fensters enthält.
Hier sprechen wir über die Interpretation von clientHeight, offsetHeight und scrollHeight durch vier Browser. Dies ist document.body. Wenn es sich um ein HTML-Steuerelement handelt, ist es anders.
Diese vier Browser sind IE (Internet Explorer), NS (Netscape), Opera und FF (FireFox).
clientHeight
Jeder hat keine Einwände gegen clientHeight. Sie alle denken, dass es sich um die Höhe des sichtbaren Bereichs des Inhalts im Seitenbrowser handelt ist der Bereich unterhalb der letzten Symbolleiste und oberhalb der Statusleiste. Er hat nichts mit dem Inhalt der Seite zu tun.
offsetHeight
IE und Opera gehen davon aus, dass offsetHeight = clientHeight + Bildlaufleiste + Rand. NS und FF betrachten offsetHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann.
scrollHeight
IE und Opera betrachten scrollHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann. NS und FF betrachten scrollHeight als die Höhe des Webseiteninhalts, der Mindestwert ist jedoch clientHeight. Einfach gesagt
clientHeight ist die Höhe des Bereichs, in dem der Inhalt über den Browser angezeigt wird.
NS und FF glauben, dass offsetHeight und scrollHeight beide Webinhaltshöhen sind. Wenn die Webinhaltshöhe jedoch kleiner oder gleich clientHeight ist, ist der Wert von scrollHeight clientHeight und offsetHeight kann kleiner als clientHeight sein.
IE und Opera betrachten offsetHeight als den sichtbaren Bereich der clientHeight-Bildlaufleiste plus Rahmen. scrollHeight ist die tatsächliche Höhe des Webseiteninhalts.
Aus demselben Grund
Die Erklärungen zu clientWidth, offsetWidth und scrollWidth sind die gleichen wie oben, nur die Höhe wird durch die Breite ersetzt.
Aber
FF interpretiert clientHeight in verschiedenen DOCTYPEs unterschiedlich, xhtml 1 trasitional interpretiert es jedoch nicht wie oben. Andere Browser haben dieses Problem nicht.
js ermittelt die Seitenhöhe
Kopieren Sie den Codecode wie folgt:
<Skript>
Funktion getInfo()
{
vars = "";
s += "Sichtbare Bereichsbreite der Webseite:"+ document.body.clientWidth;
s += „Die Höhe des sichtbaren Bereichs der Webseite:“+ document.body.clientHeight;
s += „Die Breite des sichtbaren Bereichs der Webseite: „+ document.body.offsetWidth +“ (einschließlich der Breite der Kanten und Bildlaufleisten)“;
s += „Die Höhe des sichtbaren Bereichs der Webseite: „+ document.body.offsetHeight + „ (einschließlich der Breite der Kante)“;
s += „Volltextbreite des Webseitentextes:“+ document.body.scrollWidth;
s += „Volltexthöhe des Webseitenkörpers:“+ document.body.scrollHeight;
s += „Die Höhe, auf die die Webseite gescrollt wird (ff):“+ document.body.scrollTop;
s += „Die Höhe, auf die die Webseite gescrollt wird (dh):“+ document.documentElement.scrollTop;
s += "Die linke Seite der Webseite wird gescrollt:"+ document.body.scrollLeft;
s += "Im Hauptteil der Webseite: "+ window.screenTop;
s += "Links vom Textteil der Webseite:"+ window.screenLeft;
s += „Die Höhe der Bildschirmauflösung:“+ window.screen.height;
s += "Bildschirmauflösungsbreite:"+ window.screen.width;
s += „Auf dem Bildschirm verfügbare Arbeitsbereichshöhe:“+ window.screen.availHeight;
s += „Auf dem Bildschirm verfügbare Arbeitsbereichsbreite:“+ window.screen.availWidth;
s += „Ihre Bildschirmeinstellung ist „+ window.screen.colorDepth +“ Bitfarbe“;
s += „Ihre Bildschirmeinstellungen“ + window.screen.deviceXDPI +“ Pixel/Zoll“;
//alert(s);
}
getInfo();
</script>
In meinem lokalen Test:
Kann unter IE, Firefox, Opera verwendet werden
document.body.clientWidth
document.body.clientHeight
Es ist verfügbar, es ist einfach, es ist praktisch.
Und unter den Unternehmensprojekten:
Opera verwendet immer noch
document.body.clientWidth
document.body.clientHeight
Aber IE und FireFox verwenden
document.documentElement.clientWidth
document.documentElement.clientHeight
Es stellt sich heraus, dass die W3C-Standards Ärger bereiten.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Wenn Sie diese Tag-Zeile zur Seite hinzufügen
Im IE:
document.body.clientWidth ==> BODY-Objektbreite
document.body.clientHeight ==> BODY-Objekthöhe
document.documentElement.clientWidth ==> Sichtbare Bereichsbreite
document.documentElement.clientHeight ==> Höhe des sichtbaren Bereichs
In Firefox:
document.body.clientWidth ==> BODY-Objektbreite
document.body.clientHeight ==> BODY-Objekthöhe
document.documentElement.clientWidth ==> Sichtbare Bereichsbreite
document.documentElement.clientHeight ==> Höhe des sichtbaren Bereichs
In der Oper:
document.body.clientWidth ==> Sichtbare Bereichsbreite
document.body.clientHeight ==> Höhe des sichtbaren Bereichs
document.documentElement.clientWidth ==> Seitenobjektbreite (d. h. BODY-Objektbreite plus Randbreite)
document.documentElement.clientHeight ==> Seitenobjekthöhe (d. h. BODY-Objekthöhe plus Randhöhe)
Und wenn kein W3C-Standard definiert ist, dann
IE ist:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox ist:
document.documentElement.clientWidth ==> Seitenobjektbreite (d. h. BODY-Objektbreite plus Randbreite) document.documentElement.clientHeight ==> Seitenobjekthöhe (d. h. BODY-Objekthöhe plus Randhöhe)
Oper ist:
document.documentElement.clientWidth ==> Seitenobjektbreite (d. h. BODY-Objektbreite plus Randbreite) document.documentElement.clientHeight ==> Seitenobjekthöhe (d. h. BODY-Objekthöhe plus Randhöhe)
Das ist wirklich eine problematische Sache. Aus Entwicklungssicht wäre es sogar viel praktischer, weniger Objekte und Methoden zu haben und nicht die neuesten Standards zu verwenden.