JavaScript: Client-Maße

Maße des Bildschirms, Browserfensters und Viewports

► JavaScript-Referenz: screen.width screen.height
► JavaScript-Referenz: screen.availWidth screen.availHeight
► JavaScript-Referenz: window.outerWidth window.outerHeight window.innerWidth window.innerHeight
► JavaScript-Referenz: clientWidth clientHeight

In JavaScript stehen diverse Eigenschaften zur Verfügung, um die Dimensionen des Bildschirms bzw. des Browserfensters zu ermitteln, abhängig davon, welche Bestandteile der Oberfläche dabei berücksichtigt werden sollen.

Bildschirmgröße über alles
window.screen.width
window.screen.height

Verfügbarer Desktop ohne Taskleiste / Seitenleiste
window.screen.availWidth
window.screen.availHeight

Browserfenster mit Fensterrahmen, Titelleiste, Menüleiste usw.
window.outerWidth
window.outerHeight

Viewport mit Scrollbars
window.innerWidth
window.innerHeight

Viewport ohne Scrollbars (wenn auf <html> angewendet)
document.getElementsByTagName("html")[0].clientWidth
document.getElementsByTagName("html")[0].clientHeight

Durch Klick auf den Button können die aktuellen Maße des eigenen Browsers bestimmt werden:

screen.width		screen.height
screen.availWidth		screen.availHeight
window.outerWidth		window.outerHeight
window.innerWidth		window.innerHeight
<html>.clientWidth		<html>.clientHeight

Scrollposition von Dokument bzw. Element

► JavaScript-Referenz: window.pageXOffset window.pageYOffset
► JavaScript-Referenz: scrollLeft scrollTop

Um die Position des geladenen Dokuments innerhalb des Viewports abhängig vom Scrollen zu ermitteln oder festzulegen, stehen ebenfalls verschiedene Eigenschaften zur Verfügung.

pageXOffset und pageYOffset sind Aliase von scrollX bzw. scrollY, die aber nicht von jedem Browser unterstützt werden. Mit diesen Eigenschaften kann ermittelt werden, um wie viele Pixel der Benutzer eine Seite nach unten bzw. nach rechts gescrollt hat:

window.pageXOffset

window.pageYOffset

scrollLeft und scrollTop enthalten die Werte, um die der Inhalt eines bestimmten Elements gescrollt wurde.

Code kopieren

<br>
<div class='div1' id="imgdiv" onscroll="updateTables();" style='margin:20px auto 0;width:200px;height:150px;overflow:auto;border:3px solid white;padding:5px;background-color:red;'>
  <img src='img/taj.jpg' alt='' height='300' style='background-color:cyan;padding:5px;margin:5px;'>>
</div>
<table class='sizes' style='float:left;margin-right:20px;'>
  <tr><td class='special mono'>scrollLeft</td><td id='scrollleft' class='normal right mono'>0</td><td class='special mono'>scrollTop</td><td id='scrolltop' class='normal right mono'>0</td></tr>
  <tr><td class='special mono'>scrollWidth</td><td id='scrollwidth' class='normal right mono'></td><td class='special mono'>scrollHeight</td><td id='scrollheight' class='normal right mono'></td></tr>
  <tr><td class='special mono'>offsetWidth</td><td id='offsetwidth' class='normal right mono'></td><td class='special mono'>offsetHeight</td><td id='offsetheight' class='normal right mono'></td></tr>
  <tr><td class='special mono'>clientWidth</td><td id='clientwidth' class='normal right mono'></td><td class='special mono'>clientHeight</td><td id='clientheight' class='normal right mono'></td></tr>
</table>
<table class='sizes'>
  <tr>
    <td class='special mono'>left</td><td id='bcr_left' class='normal right mono'></td>
    <td class='special mono'>top</td><td id='bcr_top' class='normal right mono'></td>
  </tr>
  <tr>
    <td class='special mono'>right</td><td id='bcr_right' class='normal right mono'></td>
    <td class='special mono'>bottom</td><td id='bcr_bottom' class='normal right mono'></td>
  </tr>
  <tr>
    <td class='special mono'>width</td><td id='bcr_width' class='normal right mono'></td>
    <td class='special mono'>height</td><td id='bcr_height' class='normal right mono'></td>
  </tr>
  <tr>
    <td class='special mono'>x</td><td id='bcr_x' class='normal right mono'></td>
    <td class='special mono'>y</td><td id='bcr_y' class='normal right mono'></td>
  </tr>
</table>
<script>
  function updateTables() {
    document.getElementById("xoffset").innerHTML = window.pageXOffset;
    document.getElementById("yoffset").innerHTML = window.pageYOffset;
    el = document.getElementById("imgdiv");
    document.getElementById("scrollleft").innerHTML = el.scrollLeft;
    document.getElementById("scrolltop").innerHTML = el.scrollTop;
    document.getElementById("scrollwidth").innerHTML = el.scrollWidth;
    document.getElementById("scrollheight").innerHTML = el.scrollHeight;
    document.getElementById("offsetwidth").innerHTML = el.offsetWidth;
    document.getElementById("offsetheight").innerHTML = el.offsetHeight;
    document.getElementById("clientwidth").innerHTML = el.clientWidth;
    document.getElementById("clientheight").innerHTML = el.clientHeight;
    bcr = el.getBoundingClientRect();
    document.getElementById("bcr_left").innerHTML = bcr.left.toFixed(1);
    document.getElementById("bcr_top").innerHTML = bcr.top.toFixed(1);
    document.getElementById("bcr_right").innerHTML = bcr.right.toFixed(1);
    document.getElementById("bcr_bottom").innerHTML = bcr.bottom.toFixed(1);
    document.getElementById("bcr_width").innerHTML = bcr.width.toFixed(1);
    document.getElementById("bcr_height").innerHTML = bcr.height.toFixed(1);
    document.getElementById("bcr_x").innerHTML = bcr.x.toFixed(1);
    document.getElementById("bcr_y").innerHTML = bcr.y.toFixed(1);
  }
</script>

scrollLeft	0	scrollTop	0
scrollWidth		scrollHeight
offsetWidth		offsetHeight
clientWidth		clientHeight

left		top
right		bottom
width		height
x		y

Maße und Position eines Elements

► JavaScript-Referenz: scrollWidth scrollHeight offsetWidth offsetHeight
► JavaScript-Referenz: clientWidth clientHeight getBoundingClientRect()

Folgende Werte sind ebenfalls in der Tabelle oben enthalten:

Tatsächliche (eventuell durch Kind-Elemente erweiterte) Größe mit padding aber ohne border und margin:
scrollWidth / scrollHeight (read-only, nur Blockelemente)

Sichtbare Größe mit padding und border aber ohne margin:
offsetWidth / offsetHeight (read-only)

Sichtbare Größe mit padding aber ohne border, margin und Scrollbars:
clientWidth / clientHeight (read-only, nur Blockelemente)

Die Methode getBoundingClientRect() gibt ein Objekt mit folgenden Eigenschaften zurück:

left – linke Kante relativ zum Nullpunkt des Viewports
top – obere Kante relativ zum Nullpunkt des Viewports
right – rechte Kante relativ zum Nullpunkt des Viewports
bottom – untere Kante relativ zum Nullpunkt des Viewports
width – offenbar identisch mit offsetWidth
height – offenbar identisch mit offsetHeight
x – offenbar identisch mit left
y –offenbar identisch mit top