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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
正则表达式语法
2006/10/09 Javascript
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
如何在PHP中读写文件
2020/09/07 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python中的yield使用方法
2014/02/11 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python实现最短路径的实例方法
2020/07/19 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
优秀会计求职信
2014/07/04 职场文书
相亲活动方案
2014/08/26 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
基于redis+lua进行限流的方法
2022/07/23 Redis