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的public、private和privileged模式
Dec 28 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
js创建对象的方式总结
Jan 10 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
vue+elementUI实现图片上传功能
Aug 20 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
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
javascript实现留言板功能
2020/02/08 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python struct.unpack
2008/09/06 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python中字符串的操作方法大全
2018/06/03 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
广告学毕业生求职信
2014/01/30 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2015年服务员工作总结
2015/04/08 职场文书
酒店开业主持词
2015/07/02 职场文书
村主任当选感言
2015/08/01 职场文书
学校远程教育工作总结
2015/08/11 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Python sklearn分类决策树方法详解
2022/09/23 Python