在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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
JavaScript 继承的实现
Jul 09 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
关于引入vue.js 文件的知识点总结
Jan 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Javasipt:操作radio标签详解
2013/12/30 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
Python Web开发模板引擎优缺点总结
2014/05/06 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
django中瀑布流写法实例代码
2019/10/14 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
详解python datetime模块
2020/08/17 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
关于元旦的广播稿
2014/02/16 职场文书
设备售后服务承诺书
2014/05/30 职场文书
争先创优演讲稿
2014/09/15 职场文书
房屋买卖协议样本
2014/11/16 职场文书
职工培训工作总结
2015/08/10 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
如何书写邀请函?
2019/06/24 职场文书