谈谈对offsetleft兼容性的理解


Posted in Javascript onNovember 11, 2015

关于此属性的基本用法可以参阅offsetleft属性用法详解一章节。

此属性具有一定的兼容性问题,那就是在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的位置。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
JavaScript实现前端实时搜索功能
Mar 26 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 #Javascript
jquery事件的ready()方法使用详解
Nov 11 #Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 #Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 #Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 #Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 #Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 #Javascript
You might like
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
简单介绍Python中的try和finally和with方法
2015/05/05 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
基于python实现对文件进行切分行
2020/04/26 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
计算机本科生自荐信
2013/10/15 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
合作意向书模板
2014/03/31 职场文书
素质教育标语
2014/06/27 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android