Javascript:

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高)

alert(document.body.clientWidth); //网页可见区域宽(body)

alert(document.body.clientHeight); //网页可见区域高(body)

alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop); //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)

alert(window.screenTop); //浏览器距离Top

alert(window.screenLeft); //浏览器距离Left

alert(window.screen.height); //屏幕分辨率的高

alert(window.screen.width); //屏幕分辨率的宽

alert(window.screen.availHeight); //屏幕可用工作区的高

alert(window.screen.availWidth); //屏幕可用工作区的宽

Jquery

alert($(window).height()); //浏览器当前窗口可视区域高度

alert($(document).height()); //浏览器当前窗口文档的高度

alert($(document.body).height()); //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度

alert($(document).width()); //浏览器当前窗口文档对象宽度

alert($(document.body).width()); //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin

- 转载

Javascript:各种宽高的更多相关文章

  1. JavaScript固定宽高

    固定高宽:  <script type="text/javascript">         if (/Android (\d+\.\d+)/.test(navigat ...

  2. javascript 窗口宽高滚动

    //不加window IE不支持 console.info(window.screenLeft);//IE支持火狐不支持 console.info(window.screenX);//火狐支持,IE不 ...

  3. javascript各种宽高

    参考: http://www.w3cschool.cc/jsref/dom-obj-all.html http://www.cnblogs.com/wen12128/archive/2012/05/2 ...

  4. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  5. 常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

    我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页 ...

  6. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  7. JavaScript中的各种宽高属性

    转自慕课网:http://www.imooc.com/article/14516   在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...

  8. JavaScript中的各种宽高总结

    window和document首先我们来高清两个概念:    window和document的区别是什么?    window.location和document.location是一样吗?第一个问题 ...

  9. JavaScript 中禁止用户右键菜单,复制,选取,Ctrl,Alt,Shift. 获取宽高,清除浮动

    //禁用右键菜单 document.oncontextmenu = function(){ event.returnValue = false; } //禁用选取内容 document.onselec ...

随机推荐

  1. NFS服务器的搭建与使用,实现数据同步

    NFS的基本架构,如下图所示: NFS服务是基本RPC协议的,所以安装NFS的前提要安装RPC协议,就像java语言一定要基于jdk一样! 下面的搭建centos-1作为服务端模拟A服务器,cento ...

  2. django中的setting最佳配置小结

    Django settings详解 1.基础 DJANGO_SETTING_MODULE环境变量:让settings模块被包含到python可以找到的目录下,开发情况下不需要,我们通常会在当前文件夹运 ...

  3. get请求和post的请求的区别

    https://www.cnblogs.com/logsharing/p/8448446.html

  4. RNA-Seq基因组比对工具HISAT2

    原文网址: http://blog.biochen.com/archives/337 HISAT2是TopHat2/Bowti2的继任者,使用改进的BWT算法,实现了更快的速度和更少的资源占用,作者推 ...

  5. vue实现进入页面表单聚焦

    <input type="text" ref="input"/> <script> mounted(){ this.$refs['inp ...

  6. 用淘宝镜像安装electron的方法

    在网友那里看到的,命令如下,亲测安装electron 1.7.9 成功,关键是几秒钟就搞定了.今天是 11 Dec 2017. ELECTRON_MIRROR=http://npm.taobao.or ...

  7. CenctOS6 and CenctOS7 多种姿势解决忘记密码

    -----linux---- 忘记密码啦!!! 忘记密码教程!!! 教你们忘记密码(我原来密码就是123456,忘记是不可能的!假装忘记的样子 0.0) 现在我们忘记密码了!对忘记密码了.我忘记密码了 ...

  8. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

  9. STL:set用法总结

    一:介绍 set是STL的关联式容器,以红黑树(Red-Black Tree)作为底层数据结构.自动去重,保证每个元素唯一,并对数据进行排序. 命名空间为std,所属头文件为<set> 二 ...

  10. STL:vector用法总结

    一:介绍 vector是C++标准模板库,是一个容器,底层是数组,为连续内存.命名空间为std,所属头文件为<vector>   注意:不是<vector.h>vector存储 ...