在IE下:float属性会影响offsetTop的取值


Posted in Javascript onDecember 22, 2006

因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样。

没有使用float:left;取的到值是正常值200;
<!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>
<title>Float对offsetTop的影响</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="text/css" media="all">
body {margin:0;padding:0;}
#Top {height:100px;}
#Main {padding:100px;}
#IECN {width:200px;height:50px;background:#f00;color:#fff;}
</style>
<script type="text/javascript">
<!--
function ShowIt(o) {
 alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;} 没有使用float属性,取到的offsetTop的值正常:200。</div>
<div id="Main">
 <div id="IECN" onclick="ShowIt(this);">点击此处试试</div>
</div>
</body>
</html>

使用了float:left;后,取的值却变成了100,平白无故的少了100 
<!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>
<title>Float对offsetTop的影响</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="text/css" media="all">
body {margin:0;padding:0;}
#Top {height:100px;}
#Main {padding:100px;float:left}
#IECN {width:200px;height:50px;background:#f00;color:#fff;}
</style>
<script type="text/javascript">
<!--
function ShowIt(o) {
 alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;float:left;} 使用了float属性,取到的offsetTop的值只有100了,无故少了100。</div>
<div id="Main">
 <div id="IECN" onclick="ShowIt(this);">点击此处试试</div>
</div>
</body>
</html>

Javascript 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
七个很有意思的PHP函数
May 12 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
全面分析JavaScript 继承
May 30 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
Javascript实现的分页函数
Dec 22 #Javascript
一些常用的Javascript函数
Dec 22 #Javascript
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 #Javascript
使用Modello编写JavaScript类
Dec 22 #Javascript
获取Javscript执行函数名称的方法
Dec 22 #Javascript
Javascript开发包大全整理
Dec 22 #Javascript
用js重建星际争霸
Dec 22 #Javascript
You might like
php.ini中date.timezone设置分析
2011/07/29 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
js实现选项卡效果
2020/03/07 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
delegate与普通函数的区别
2014/01/22 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
最新奶茶店创业计划书范文
2014/02/08 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
农村婚庆主持词
2015/06/29 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
HTML基础详解(下)
2021/10/16 HTML / CSS
redis protocol通信协议及使用详解
2022/07/15 Redis