谈谈对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 写类方式之一
Jul 05 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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的cms
2010/12/19 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
国家励志奖学金获奖感言
2014/01/09 职场文书
村道德模范事迹材料
2014/08/28 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2019年大学推荐信
2019/06/24 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书