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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
node.js实现爬虫教程
Aug 25 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python自动生产表情包
2017/03/17 Python
Python之py2exe打包工具详解
2017/06/14 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python方向键控制上下左右代码
2018/01/20 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
python Xpath语法的使用
2020/11/26 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
动员大会主持词
2014/03/20 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
星级党支部申报材料
2014/05/31 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
基石观后感
2015/06/12 职场文书