js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
作者:jingxian 发布时间:2024-04-16 08:55:16
标签:js,浏览器,窗口,高度
如下所示:
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 返回最终的参考父元素。
*/
0
投稿
猜你喜欢
- 在编程中我们往往会希望能够实现这样的操作:点击Button,选择了图片,然后在窗口中的Label处显示选到的图片。那么这时候就需要如下代码:
- 前言SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:
- 如下所示:import numpy as npimport matplotlib.pyplot as pltx = np.linspace(
- python函数式编程之装饰器1.开放封闭原则简单来说,就是对扩展开放,对修改封闭。在面向对象的编程方式中,经常会定义各种函数。一个函数的使
- 本文实例讲述了mysql累积聚合原理与用法。分享给大家供大家参考,具体如下:累积聚合为聚合从序列内第一个元素到当前元素的数据,如为每个员工返
- 在用tensorflow做一维的卷积神经网络的时候会遇到tf.nn.conv1d和layers.conv1d这两个函数,但是这两个函数有什么
- Player.playState0 Undefined Windows Media Player is in an undefined st
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 15 - SlidersMooTools 1.2的
- Python 运算符通常用于对值和变量执行操作。这些是用于逻辑和算术运算的标准符号。在本文中,我们将研究不同类型的 Python 运算符。&
- 1、模拟退火算法退火是金属从熔融状态缓慢冷却、最终达到能量最低的平衡态的过程。模拟退火算法基于优化问题求解过程与金属退火过程的相似性,以优化
- 本文实例讲述了python飞机大战pygame游戏框架搭建操作。分享给大家供大家参考,具体如下:目标明确主程序职责实现主程序类准备游戏精灵组
- 数据库设计是整个程序的重点之一,为了支持相关程序运行,最佳的数据库设计往往不可能一蹴而就,只能反复探寻并逐步求精,这是一个复杂的过程,也是规
- 前言本文对Python 自动化操作Excel并生成图表,做了详细的分析和说明我们先来看一下python中能操作Excel的常用库对比1.xl
- 1、随机生成0-1的浮点数random.randomrandom.random()用于生成一个0到1的随机浮点数: 0 <= n &l
- 前言order by满足两种情况,会使用 index 方式排序:order by语句使用索引最左前列(最左匹配法则)where子句和orde
- 1.安装数据库1)yum -y install mysql-server(简单)yum命令自动从网上寻找mysql服务资源,下载至本地并完成
- 先来看一张简单的文档树很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵
- 人体的视觉系统是一个相当神奇的存在,对于下面的一串手写图像,可以毫不费力的识别出他们是504192,轻松到让人都忘记了其实这是一个复杂的工作
- 如下所示:from sklearn.datasets import load_bostonboston = load_boston()fro
- 环境:Windows, Python2.7一维情况:<span style="font-size:14px;"&g