在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 相关文章推荐
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 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 星际争霸
乱谈我对耳机、音箱的感受
2021/03/02 无线电
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php读取mysql的简单实例
2014/01/15 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js Calender控件使用详解
2015/01/05 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python实现RSA加密(解密)算法
2016/02/17 Python
python实现实时监控文件的方法
2016/08/26 Python
基于Python闭包及其作用域详解
2017/08/28 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python求解正态分布置信区间教程
2019/11/20 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
关于VPN
2012/06/10 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
药品业务员岗位职责
2014/04/17 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android