获取浏览器窗口的可视区域高度和宽度

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度 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 ==> 屏幕可用工作区宽度

jquery获取

$(window).height()                //浏览器时下窗口可视区域高度
$(document).height()  //浏览器时下窗口文档的高度
$(document.body).height()      //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width()   //浏览器时下窗口可视区域宽度
$(document).width() //浏览器时下窗口文档对于象宽度
$(document.body).width()      //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding
HTML精确定位:  scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

参考

js获取网页和屏幕高度的更多相关文章

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

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

  2. js获取网页中宽高度集合

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

  3. js获取网页的各种高度和宽度

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

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

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

  5. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

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

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

  7. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

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

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

  9. JS获取各种宽度、高度的简单介绍:

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

随机推荐

  1. python blob操作

    最近在学习使用Python,操作Oracle数据库采用的是cx_Oracle模块. 对于基本字段,都可以正常操作.但是对于Blob字段,我试试好几次,都没成功.下面贴出测试代码,与大家讨论讨论. 这是 ...

  2. idea 启动web项目

    1>Run>Edit Configurations... 2>Server>Open browser>URL>http://localhost:8888/demo2 ...

  3. Kotlin 之操作符重载

    Kotlin 之操作符重载   参考: kotlin in action kotlin 官方参考文档 运算符重载 Kotlin允许我们为自己的类型提供预定义的一组操作符实现(这些操作符都对应的成员函数 ...

  4. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  5. Python高级笔记(七)魔法属性

    1. 私有属性 名字重整 print(Test.__dict__) {'__weakref__': <attribute '__weakref__' of 'Test' objects>, ...

  6. 【DataBase】H2 DateBase的拓展使用

    连接模式 支持以下连接模式: 嵌入模式(使用JDBC的本地连接) 服务器模式(使用JDBC或ODBC over TCP / IP进行远程连接) 混合模式(同时本地和远程连接) 嵌入模式 在嵌入模式下, ...

  7. Hadoop记录-HDFS均衡脚本

    #!/bin/bash #作用:hdfs使用率取最大100个主机和最小80个主机进行数据均衡 #打印报告 hdfs dfsadmin -report>report.txt #截取主机名 cat ...

  8. Spring MVC 实例:Excel视图的使用

    对于Excel而言,Spring MVC所推荐的是使用AbstractXlsView,它实现了视图接口,从其命名也可以知道它只是一个抽象类,不能生成实例对象.它自己定义了一个抽象方法——buildEx ...

  9. .Net MVC 下载网站的文件

    目录 前言 C#文件的下载 ajax 返回文件路径,使用window.open打开 前言 上传文件我使用的是Bootstrap的插件FileInput,这个抽时间看看写个博客 现在下载我遇到坑了,而这 ...

  10. 页面进行ajax时 显示一个中间浮动loading

    先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层. 适用于触屏和pc页面. /* 页面进行ajax时 显示一个中间浮动loading @auther ...