js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法


Posted in Javascript onNovember 21, 2016

如下所示:

screen.width
screen.height


screen.availHeight //获取去除状态栏后的屏幕高度
screen.availWidth //获取去除状态栏后的屏幕高度

一、通过浏览器获得屏幕的尺寸

二、获取浏览器窗口内容的尺寸

//高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

//宽度
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht

/ * 
 * window.innerHeight  FF/CH 支持,获取窗口尺寸。
 * document.documentElement.clientHeight  IE/CH支持
 * document.body.client  通过body元素获取内容的尺寸

* /

三、滚动条支持的差异性

不进行任何滚动条更改的页面,Firefox/IE 默认认为HTML元素具有滚动条属性。而body不具有。

但Chrome 则认为body是具有滚动条属性的。

因此兼容性的写法是:

document.documentElement.scrollTop || document.body.scrollTop

四、获取元素的尺寸

elemnt.offsetWidth
elemnt.offsetHeight

// 仅IE5不支持,放心使用吧

说明图:

js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

* offsetWidth 可以获取元素的高度尺寸,包括:width + padding[left,right] + border[left,right]

* offsetHeight 可以获取元素的宽度尺寸,包括:height + padding[top,bottom] + bottom[top,bottom]

五、元素的偏移属性

element.offsetTop //获取元素与其偏移参考父元素顶部的间隔距离
element.offsetLeft //获取元素与其偏移参考父元素左边的间隔距离
element.offsetParent //获取当前元素的参考父元素

*offsetTop 可以获取元素距其上一级的偏移参考父元素顶部的距离。包括:margin[top] + top

*offsetLeft 可以获取元素距其上一级的偏移参考父元素左边的距离。包括:margin[left] + left

*注意的是offsetParent在IE6/7,与IE8/FF/CH中存在兼容性问题:

在FF/Chrome/IE8+ :

如果当前元素有定位,则偏移参考父元素是其上一级的最近的那个定位元素。

如果当前元素没有定位,则默认以body为最终的参考父元素。

在IE6/7:

不论有没有定位,其偏移参考父元素都是其上一级的父元素。

总的来说:

不论是FF/Chrome还是IE,最终的参考父元素都是body元素, 因此兼容的方法就是获取当前元素到body元素的偏移位置值。

兼容性写法

function getOffestValue(elem){

    var Far = null;
    var topValue = elem.offsetTop;
    var leftValue = elem.offsetLeft;
    var offsetFar = elem.offsetParent;

    while(offsetFar){
      alert(offsetFar.tagName)
      topValue += offsetFar.offsetTop;
      leftValue += offsetFar.offsetLeft;
      Far = offsetFar;
      offsetFar = offsetFar.offsetParent;
    }
    return {'top':topValue,'left':leftValue,'Far':Far}
  }

/*
 * top 当前元素距离body元素顶部的距离。
 * left 当前元素距离body元素左侧的距离。
 * Far 返回最终的参考父元素。
*/

以上这篇js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
js实现目录定位正文示例
Nov 14 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
JS中判断null的方法分析
Nov 21 #Javascript
javascript 利用arguments实现可变长参数
Nov 21 #Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 #Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 #Javascript
AngularJS Phonecat实例讲解
Nov 21 #Javascript
浅谈React 属性和状态的一些总结
Nov 21 #Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 #Javascript
You might like
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
express框架下使用session的方法
2019/07/31 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python中print函数简单使用总结
2019/08/05 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python之语音识别speech模块
2020/09/09 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
PHP如何与mysql建立链接
2013/05/05 面试题
高三自我评价
2014/02/01 职场文书
优良学风班申请材料
2014/02/13 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
职工宿舍管理制度
2015/08/05 职场文书
高一军训口号
2015/12/25 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
python实现剪贴板的操作
2021/07/01 Python