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

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

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

screen.widthscreen.height
screen.availWidthscreen.availHeight
window.outerWidthwindow.outerHeight
window.innerWidthwindow.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.pageXOffsetwindow.pageYOffset

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

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<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>
scrollLeft0scrollTop0
scrollWidthscrollHeight
offsetWidthoffsetHeight
clientWidthclientHeight
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

left left top top right right bottom bottom scrollWidth scrollWidth scrollHeight scrollHeight offsetWidth offsetWidth offsetHeight offsetHeight clientWidth clientWidth clientHeight clientHeight scrollLeft scrollLeft scrollTop scrollTop pageXOffset pageXOffset pageYOffset pageYOffset