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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
基于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
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php数组键值用法实例分析
2015/02/27 PHP
php图片添加水印例子
2016/07/20 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
js 调用百度分享功能
2017/02/27 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python脚本处理空格的方法
2016/08/08 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
结婚典礼证婚词
2014/01/11 职场文书
运动会跳远广播稿
2014/02/04 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
爱牙日活动总结
2014/08/29 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
小学远程教育工作总结
2015/08/13 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技