1. 常用:

    JS 获取浏览器窗口大小

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 获取窗口宽度
    if (window.innerWidth)
    winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
    // 获取窗口高度
    if (window.innerHeight)
    winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
    }

    详细:

    关于获取各种浏览器可见窗口大小: 
    <script> 
    function getInfo() 
    { 
    var s = ""; 
    s = " 网页可见区域宽：" document.body.clientWidth; 
    s = " 网页可见区域高：" document.body.clientHeight; 
    s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)"; 
    s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)"; 
    s = " 网页正文全文宽：" document.body.scrollWidth; 
    s = " 网页正文全文高：" document.body.scrollHeight; 
    s = " 网页被卷去的高(ff)：" document.body.scrollTop; 
    s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop; 
    s = " 网页被卷去的左：" document.body.scrollLeft; 
    s = " 网页正文部分上：" window.screenTop; 
    s = " 网页正文部分左：" window.screenLeft; 
    s = " 屏幕分辨率的高：" window.screen.height; 
    s = " 屏幕分辨率的宽：" window.screen.width; 
    s = " 屏幕可用工作区高度：" window.screen.availHeight; 
    s = " 屏幕可用工作区宽度：" window.screen.availWidth;

    s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色"; 
    s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸"; 
    //alert (s); 
    } 
    getInfo(); 
    </script> 
    在我本地测试当中： 
    在IE、FireFox、Opera下都可以使用 
    document.body.clientWidth 
    document.body.clientHeight 
    即可获得，很简单，很方便。 
    而在公司项目当中： 
    Opera仍然使用 
    document.body.clientWidth 
    document.body.clientHeight 
    可是IE和FireFox则使用 
    document.documentElement.clientWidth 
    document.documentElement.clientHeight 
    原来是W3C的标准在作怪啊 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    如果在页面中添加这行标记的话 在IE中： 
    document.body.clientWidth ==> BODY对象宽度 
    document.body.clientHeight ==> BODY对象高度 
    document.documentElement.clientWidth ==> 可见区域宽度 
    document.documentElement.clientHeight ==> 可见区域高度 
    在FireFox中： 
    document.body.clientWidth ==> BODY对象宽度 
    document.body.clientHeight ==> BODY对象高度 
    document.documentElement.clientWidth ==> 可见区域宽度 
    document.documentElement.clientHeight ==> 可见区域高度 
    ? 
    在Opera中： 
    document.body.clientWidth ==> 可见区域宽度 
    document.body.clientHeight ==> 可见区域高度 
    document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
    document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
    而如果没有定义W3C的标准，则 
    IE为： 
    document.documentElement.clientWidth ==> 0 
    document.documentElement.clientHeight ==> 0 
    FireFox为： 
    document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
    Opera为： 
    document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

  2. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
  3. scrollHeight: 获取对象的滚动高度。
  4. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  5. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  6. scrollWidth:获取对象的滚动宽度
  7. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
  8. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
  9. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
  10. event.clientX 相对文档的水平座标
  11. event.clientY 相对文档的垂直座标
  12. event.offsetX 相对容器的水平坐标
  13. event.offsetY 相对容器的垂直坐标
  14. document.documentElement.scrollTop 垂直方向滚动的值
  15. event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度的更多相关文章

  1. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  2. js获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  3. [js]获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  4. js获取网页的各种高度

    原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...

  5. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  6. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

  7. js技术要点---JS 获取网页源代码

    JS 获取网页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html& ...

  8. Js/Jquery获取网页屏幕可见区域高度

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clie ...

  9. js获取网页和屏幕高度

    获取浏览器窗口的可视区域高度和宽度 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象 ...

随机推荐

  1. (转)正则表达式与Python（RE）模块

    Python正则表达式指南  原文:http://blog.csdn.net/qdx411324962/article/details/46799831 Python3(2):正则表达式与Python ...

  2. PHP面向对象的基本原则

    对象内部是高内聚的 ——对象只负责一项特定的功能(职能可大可小) ——所有对象相关的内容都封装到对象内部 高内聚就是该有的都有,用的时候不会缺胳膊少腿! 对象对外是低耦合的 ——外部世界可以看到对象的 ...

  3. Robot Framework的安装、更新与卸载

    Robot Framework的安装.更新与卸载 一,安装RF前的准备 一般就三种执行环境 Python, Jython (JVM) 和 IronPython (.NET): 安装python: #T ...

  4. android 拍照和从相册选择组件

    android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...

  5. mysql 必知必会总结

    以前 mysql 用的不是很多, 2 天看了一遍 mysql 必知必会又复习了一下基础.  200 页的书,很快就能看完, 大部分知识比较基础, 但还是了解了一些以前不知道的知识点.自己做一个备份,随 ...

  6. ugui的优化

    参考文章 https://www.jianshu.com/p/061e67308e5f https://www.jianshu.com/p/8a9ccf34860e http://blog.jobbo ...

  7. MySql的备份还原

    备份数据是数据库管理最常用的操作.为了保证数据库中数据的安全,数据管理员需要定期进行数据备份.一旦数据库遭到破坏,便可通过备份的文件来还原数据库.因此,数据备份是一项很重要的工作. 数据备份 使用my ...

  8. WPF与Winform中的不同(1)

    1. 部分控件的Text属性,变成了 Content属性 如: winform中,Button.Text = "abc"; wpf中,Button.Content = " ...

  9. 特殊引用类型（string）

    private string FuncWithParameters(int param1, String param2, List<string> param3) { // 我们在这里改变 ...

  10. WPF中使用ObjectDataProvider绑定方法

    ObjectDataProvider提供了绑定任意.net类型的功能,具体功能如下: 1.ObjectDataProvider提供了绑定任意CLR类型的公嫩那个. 2.它可以再XAML中利用生命史的语 ...