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代码示例
Feb 15 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
详解Django中的过滤器
2015/07/16 Python
python字符串与url编码的转换实例
2018/05/10 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
利用python开发app实战的方法
2019/07/09 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
python实现计算器功能
2019/10/31 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
挪威手表购物网站:Klokker
2016/09/19 全球购物
小学教师节活动方案
2014/01/31 职场文书
军人违纪检讨书
2014/02/04 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书