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 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
vue实现搜索功能
May 28 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
WebRTC记录音视频流(web技术分享)
Feb 24 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
JS中的三个循环小结
2017/06/20 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python3实现购物车功能
2018/04/18 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python程序需要编译吗
2020/06/19 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
家长会标语
2014/06/24 职场文书
创先争优演讲稿
2014/09/15 职场文书
导游词300字
2015/02/13 职场文书
社区党建工作总结2015
2015/05/13 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Python音乐爬虫完美绕过反爬
2021/08/30 Python