js获取浏览器和屏幕的各种宽度高度


Posted in Javascript onFebruary 22, 2017

一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小)

1.对于IE9+、chrome、firefox、Opera、Safari:

window.innerHeight浏览器窗口的内部高度;

window.innerWidth浏览器窗口的内部宽度;

2.对于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度;

或者,因为document对象的body属性对应HTML文档的<body>标签,所以也可表示为:

document.body.clientHeight:表示HTML文档所在窗口的当前高度;

document.body.clientWidth:表示HTML文档所在窗口的当前宽度;

结论:

document.body.clientWidth/Height:的宽高偏小,高甚至默认200;

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

二:网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera:scrollHeight是网页内容实际高度,可以小于clientHeight;

2.针对NS.firefox:scrollHeight是网页内容高度,不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候,scrollHeight返回clientHeight;

3.浏览器兼容代码:

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二:网页可见区域宽高,包括滚动条等边线(会随窗口的显示大小改变)

1.值:   offsetWidth = scrollWidth + 左右滚动条 +左右边框;

offsetHeight = scrollHeight + 上下滚动条 + 上下边框;

2.浏览器兼容代码:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三:网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离;

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离;

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置;

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python入门篇之文件
2014/10/20 Python
详解Python进程间通信之命名管道
2017/08/28 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
新学期开学演讲稿
2014/05/24 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技