js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
作者:jingxian 时间:2024-04-16 08:55:16
如下所示:
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不支持,放心使用吧
说明图:
* 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,浏览器,窗口,高度
0
投稿
猜你喜欢
php curl选项列表(超详细)
2023-07-18 15:19:32
如何在pycharm中安装第三方包
2021-10-13 21:30:01
asp如何利用当前时间生成随机函数?
2010-01-01 15:44:00
详解如何使用Python网络爬虫获取招聘信息
2021-09-28 06:58:17
python打包成so文件过程解析
2022-03-19 18:08:46
python实现单例的两种方法解读
2022-04-10 21:10:46
MAC系统中添加MYSQL开机启动的方法
2024-01-13 01:52:53
js和php如何获取当前url的内容
2023-11-14 10:09:12
Mysql逗号拼接字符串的关联查询以及统计问题
2024-01-28 12:15:03
JSONObject.toString
2008-03-09 19:12:00
SQL数据库操作类
2009-01-14 16:26:00
深入MYSQL字符数字转换的详解
2024-01-18 04:20:11
pandas 按照特定顺序输出的实现代码
2023-02-04 19:35:17
Mysql出现问题:error while loading shared libraries: libaio解决方案
2024-01-13 00:12:00
Python try-except-else-finally的具体使用
2022-10-18 14:31:45
几个SQL SERVER应用问题解答
2008-01-01 19:12:00
Python实现像awk一样分割字符串
2022-07-29 18:42:07
Python爬虫Scrapy框架IP代理的配置与调试
2022-09-19 08:20:26
OpenCV半小时掌握基本操作之图像梯度
2022-05-29 00:48:03
vue自定义tap指令及tap事件的实现
2024-05-09 09:25:15