在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 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
vue vant Area组件使用详解
Dec 09 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
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php精度计算的问题解析
2019/06/21 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
express express-session的使用小结
2018/12/12 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python去掉空白行的多种实现代码
2018/03/19 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
外企测试工程师面试题
2015/02/01 面试题
大学生个人简历自我评价
2013/11/16 职场文书
老师给学生的表扬信
2014/01/17 职场文书
学生生病请假条范文
2014/02/16 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书
丧事答谢词大全
2015/09/30 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
python 算法题——快乐数的多种解法
2021/05/27 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
mysql 获取时间方式
2022/03/20 MySQL