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 更严格的相等 [译]
Sep 20 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue-resourc发起异步请求的方法
Feb 11 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP中常用的转义函数
2014/02/28 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
Vue-component全局注册实例
2018/09/06 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
网站编辑求职信
2013/10/17 职场文书
业务主管岗位职责
2013/11/20 职场文书
参观接待方案
2014/03/17 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
红旗渠导游词
2015/02/09 职场文书
2016年寒假家长评语
2015/10/10 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
一起来学习Python的元组和列表
2022/03/13 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers