zoukankan      html  css  js  c++  java
  • JS获取浏览器可视区域的尺寸

    【转】JS获取浏览器可视区域的尺寸

     

     所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度)。刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度,顺便将该文章摘下来,如下:

    在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:

    1
    2
    document.body.offsetWidth
    document.body.offsetHeight

            在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:

    1
    2
    document.documentElement.clientWidth
    document.documentElement.clientHeight

            IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;

            同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取:

    1
    2
    window.innerWidth
    window.innerHeight

    网页可见区域宽: document.body.clientWidth;
    网页可见区域高: document.body.clientHeight;
    网页可见区域高: document.body.offsetWidth; //包括边线的宽
    网页可见区域高: document.body.offsetHeight; //包括边线的宽
    网页正文全文宽: document.body.scrollWidth;
    网页正文全文高: document.body.scrollHeight;
    网页被卷去的高: document.body.scrollTop;
    网页被卷去的左: document.body.scrollLeft;
    网页正文部分上: window.screenTop;
    网页正文部分左: window.screenLeft;
    屏幕分辨率的高: window.screen.height;
    屏幕分辨率的宽: window.screen.width;
    屏幕可用工作区高度: window.screen.availHeight;
    屏幕可用工作区宽度: window.screen.availWidth;

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
    clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
    offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
    offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
    screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
    screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
    x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
    y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
     
     
  • 相关阅读:
    Codeforces 992C(数学)
    Codeforces 990C (思维)
    Codeforces 989C (构造)
    POJ 1511 Invitation Cards(链式前向星,dij,反向建边)
    Codeforces 1335E2 Three Blocks Palindrome (hard version)(暴力)
    POJ 3273 Monthly Expense(二分)
    POJ 2566 Bound Found(尺取前缀和)
    POJ 1321 棋盘问题(dfs)
    HDU 1506 Largest Rectangle in a Histogram(单调栈)
    POJ 2823 Sliding Window(单调队列)
  • 原文地址:https://www.cnblogs.com/liyuspace/p/7768320.html
Copyright © 2011-2022 走看看