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 前的按键判断代码
Mar 19 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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+mysql扎实个人基本功
2008/03/27 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python实现字典依据value排序
2016/02/24 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python多进程并行代码实例
2019/09/30 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
员工团队活动方案
2014/08/28 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
大学生实习证明范本
2014/09/19 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
病假条格式范文
2015/08/17 职场文书