谈谈对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之更有效率的字符串替换
Aug 02 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
node thread.sleep实现示例
Jun 20 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 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
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
举例讲解Python常用模块
2019/03/08 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
教师远程培训心得体会
2016/01/09 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Go语言应该什么情况使用指针
2021/07/25 Golang
Python实现滑雪小游戏
2021/09/25 Python