谈谈对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之解决IE下不渲染的bug
Jun 29 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
Vuex的热更替如何实现
Jun 05 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
一个显示天气预报的程序
2006/10/09 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python小白切忌乱用表达式
2020/05/29 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
最新党员思想汇报
2014/01/01 职场文书
早读迟到检讨书
2014/01/24 职场文书
手机被没收检讨书
2014/02/22 职场文书
合同协议书格式
2014/04/18 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
Python实现简单的猜单词
2021/06/15 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏