源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

谈谈对offsetleft兼容性的理解

  • 时间:2021-09-22 12:45 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:谈谈对offsetleft兼容性的理解
关于此属性的基本用法可以参阅[url=http://www.1sucai.cn/article/74665.htm]offsetleft属性用法详解[/url]一章节。 此属性具有一定的兼容性问题,那就是在IE7浏览器中,它的返回值是想对于最近的父辈元素的左侧的距离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
 margin: 0px;
 padding: 0px;
}
#main {
 width: 300px;
 height: 300px;
 background: red;
 position: absolute;
 left: 100px;
 top: 100px;
}
#box {
 width: 200px;
 height: 200px;
 background: blue;
 margin:50px;
 overflow:hidden;
}
#inner {
 width: 50px;
 height: 50px;
 background: green;
 text-align: center;
 line-height: 50px;
 margin: 50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>
上面的代码在其他浏览器中返回值是100,但是在IE7浏览器中返回值是50。 至于IE6没有测试,感兴趣的大家可以做一下测试。 下面抽点空给大家介绍offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算, 还用offsetLeft比较方便。 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。 3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在 css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。 offsetLeft则仍然能够取到,无需事先定义div的位置。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部