在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 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
angularJs中$scope数据序列化的实例
Sep 30 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
利用JS如何获取form表单数据
Dec 19 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Python生成随机数的方法
2014/01/14 Python
linux下python抓屏实现方法
2015/05/22 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
python中time、datetime模块的使用
2020/12/14 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
社区植树节活动总结
2015/02/06 职场文书
老员工辞职信范文
2015/05/12 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
在项目中使用redis做缓存的一些思路
2021/09/14 Redis