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

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. 深拷贝(deep clone)与浅拷贝(shallow clone)

    一.浅复制和深复制概念 浅复制(浅克隆): 被复制对象的所有变量都含有与原来对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不是复制它所引用的对象. 深 ...

  2. Java 中如何输入

    import java.util.Scanner; //键盘扫描类public class Test{public static void main(String[] args) {Scanner i ...

  3. 海思 Hi3516A Hi3518E V200 芯片介绍

    海康是生产监控摄像头和硬盘录像机的,海思是提供机器里芯片的,海思属于华为的. http://www.hisilicon.com/en/Products/ProductList/Surveillance ...

  4. IDEA分配内存无效

    idea改启动内存分配, 改 C:/Users/xxx/.IntelliJIdea2018.1/confing/idea64.exe.vmoptions 或 C:/Users/xxx/.Intelli ...

  5. Spring mvc4 + ActiveMQ 整合【什么框架与什么框架的整合搜索】

    一.配置部分 二.代码部分 三.页面部分 四.Controller控制器 五.效果展示 六.加入监听器 七.最最重要的,别忘了打赏 一.配置部分 ActiveMQ的安装这就不说了,很简单, 这个例子采 ...

  6. 算法习题---5.8Unix ls命令(Uva400)

    一:题目 输入正整数n以及n个文件名,将这n个文件名按照ASCII优先升序排列,按列优先方式左对齐输出. 注意:文件名最长的为M,那么最右列字符串长度为M,其他列的长度为M+2 注意:一列最多允许出现 ...

  7. Linux记录-批量安装软件服务(转载)

    #!/bin/bash # 安装函数 install(){    for soft in $*    do         echo "$soft"安装中...         y ...

  8. sql 获取某一时段中每一天中最大的时间的一条记录

    SELECT *FROM ( SELECT ROW_NUMBER() OVER( PARTITION BY CONVERT(CHAR(10), DataTime, 120) ORDER BY Data ...

  9. Swift4.0复习基本语法简介

    1.五种类型: 包含五种类型——枚举(enum).结构体(struct).类(class).协议( protocol)以及函数类型(function types). 2.变量对象:var 3.常量对象 ...

  10. curl命令测试网络请求中DNS解析、响应时间

    https://blog.csdn.net/dreamer2020/article/details/78152576