谈谈对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 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
JSON 数据格式介绍
Jan 13 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
Javascript玩转继承(一)
May 08 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
详解 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新手上路(十三)
2006/10/09 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
python生成器generator用法实例分析
2015/06/04 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
wxpython实现图书管理系统
2018/03/12 Python
python实现音乐下载器
2018/04/15 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
运动会跳远广播稿
2014/02/04 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
大学课外活动总结
2014/07/09 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
电子商务实训报告总结
2014/11/05 职场文书