javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
在学习offset的相关属性前,必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值(例如,返回12,而不是'12px')。
定位父元素:指在CSS中某一元素domElement[position:relative/absolute] 所相对定位的元素。
1、offsetParent
对于offsetParent来讲,最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。
a、domElement设置了position:relative/absolute属性:
domElement.offsetParent指向的是该元素的定位父元素。
但也有一个bug,见一下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#target{ position:relative; }
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
alert(target.offsetParent == document.documentElement); //IE中指向<html>元素
alert(target.offsetParent == document.body); //FF、Safari等指向<body>元素
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
b、domElement没有设置position:relative/absolute,即static:
这一点所有的浏览器基本相同,domElement的offsetParent指向的是离domElement最近的拥有position:relative/absolute属性的父级元素。若不存在,则指向 <body>元素。但这种情况也有例外,如果domElement是<td>则 offsetparent 指向<table>
c、关于offsetParent的实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#outer { position:absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
var outer = document.getElementById('outer');
alert(target.offsetParent == outer); //true
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
alert(target.offsetParent == document.body); //true
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
2、offsetLeft/Top
offsetLeft: 该元素左border的左边缘 到 该元素的offsetParent的左border内边缘的水平距离。
offsetTop:该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.test{
padding:5px;
margin:10px;
color:#fff;
border:7px solid #000;
background-color:#CC66FF;
}
#target{
position:absolute;
left:3px;
top:9px;
width:100px;
height:100px;
}
#outer{
position:relative;
width:300px;
height:300px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
alert(target.offsetLeft); //13 = margin-10px + left-3px
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
3、offsetWidth/offsetHeight
给出元素在页面中占据的宽度和高度的总计。注意:把元素的边框和滚动条计算在内。
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width;
4、相关应用
a、获得一个元素的实际宽度和高度,例如:一个自适应高度的段落,往往可以通过获得该元素CSS层叠后的最终高度【见下代码】,但是这种方法在IE中有时返回的是auto,所以使用一个元素的offsetWidth/offsetHeight是比较理想的方法。
var typeface = '';
if(elem.currentStyle)
typeface = elem.currentStyle[type];
else if(window.getComputedStyle)
typeface = window.getComputedStyle(elem , null)[type];
return typeface;
}
获得一个元素位置的可移植的方法:在窗口中的位置
var x = 0;
while(elem){
x = x + elem.offsetLeft;
elem = elem.offsetParent;
}
return x;
}
function getY(elem){
var y = 0;
while(elem){
y = y + elem.offsetTop;
elem = elem.offsetParent;
}
return y;
}
转载于:https://www.cnblogs.com/rainman/archive/2009/02/15/1391056.html
javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent相关推荐
- JavaScript DOM 9 - 元素的尺寸与位置
1: 获得页面上某个元素在视口坐标系的位置和元素的尺寸: element.getBoundingClientRect():{ left:8top:104right:1432bottom: 158wid ...
- DOM初探(17)——查看元素的尺寸与位置
四:DOM基本操作: 查看元素的尺寸: dom.offsetWidth,dom.offsetHeight(视觉上的宽高,不可能包含margin) 查看元素的位置: dom.offsetLeft,dom ...
- jQuery:设置获取属性、遍历添加删除元素、尺寸、位置
目录 一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容 三.jQuery对元素操作 1.遍历元素 2.创建 ...
- 前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- Web APIs-事件流、事件委托、其他事件、元素尺寸与位置
目录 事件流 事件捕获 事件冒泡 阻止冒泡 解绑事件 事件委托 其他事件 1.页面加载事件 2. 页面滚动事件 3.页面尺寸事件 元素尺寸与位置 今日单词 综合案例 事件流 事件完整执行过程中的流动路 ...
- 二、属性操作,文本属性值,元素操作,尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
- JQuery-jq属性操作、jq文本属性值、jq元素(创建、添加、移除)操作、jq尺寸、位置操作
属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 元素固有属性值 prop() - 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元 ...
- vue 获取元素在浏览器的位置_JavaScript获取窗口位置和元素坐标(兼容版)
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
- javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 1 function getImgInfo(url){ 2 var img = new Image(), loaded = false; 3 var info ...
最新文章
- windows笔记-内存映射文件
- win10查看pcie设备_壹拓网科技解密WIN10系统使用向日葵开机棒远程开机需要设置几个地方...
- 深圳dotnet俱乐部新群
- android中json解析及使用 (下)
- HTML学习总结(4)——表格/块/内联元素/iframe/颜色/脚本/实体
- 无刷驱动设计——浅谈MOS驱动电路
- 记一次成功修复U盘的痛苦经历
- 获取服务器的视频文件夹,视频从云服务器获取视频文件夹
- 微信支付必须是服务器,微信付款码不需要联网的原理是什么?怎么生成?
- zznu 1914 asd的甩锅计划
- 为什么c语言排在第一位,c语言我排第几个
- 数据库管理工具的使用
- Android UI性能优化 检测应用中的UI卡顿
- 大数据处理过程之核心技术ETL详解
- wr720n刷成网络打印_方便实用!教你如何简单把 usb打印机改成无线打印机!
- 仿牛客项目(持续更新)
- 32位系统和64位系统的区别是什么
- Linux下使用dd命令制作启动盘
- 知网学术论文下载caj格式转换 caj转pdf
- 早已过气的彩铃,还能在5G时代续命吗?
热门文章
- 详解排序算法(Python实现)
- AI技术不断重构安防,TSINGSEE青犀助力视频能力多场景智能化
- java 表头固定_[Java教程]web开发:表头固定(利用jquery实现)_星空网
- 邀请函 | 区块链如何助力公益?腾讯、深大、微众专家齐聚ESG系列研讨会
- Python:简易网页采集器
- Intellij Idea 提交SVN: is scheduled for addition, but is missing
- c语言水仙花数算法分析,水仙花数之C语言经典案例分析
- 4月份GitHub上最热门的Python项目
- 第七课 Shell脚本编程-大型脚本工具开发实战
- 胃不好,胃酸多,吃什么养胃?