详解 javascript中offsetleft属性的用法

转载  2015-11-11   投稿：mrr    我要评论

本章节通过代码实例介绍一下offsetleft属性的用法，需要的朋友可以做一下参考。
 
任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式（关键就在这句话！也就是说只有设置为行内样式的style属性才能被获取）。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性
 
offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，虽然话是这么说的，但是不同的浏览器效果不一样，FF中严格按上述说明执行，但是在IE6/7中，这个属性返回该DOM对象在其直接父对象中的位置，但是IE8改正了这个问题，不过IE8又有了一个新问题，其他的浏览器都是从父对象的内容区域的左上角开始定位，IE8确是从父元素的border的左上角开始定位，由于测试环境为IETester中的IE8，不能排除是IETester的问题。
 

此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。

（1）.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
（2）.如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

语法结构:

obj.offsetleft

特别说明:此属性是只读的，不能够赋值。

代码实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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>

上面的代码可以返回inner元素距离main元素的左侧的距离，因为main元素是第一个定位父辈元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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;
 margin:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 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>

上面的代码返回inner元素距离body元素左侧的尺寸。

此属性具有一定的兼容性问题，具体可以参阅offsetleft兼容性简单介绍一章节。

ps:js中的offsetLeft属性具体有什么作用？

可以判断一个物体的跟document的左边距离，也就是浏览器左边缘。比如你写一个div 获取这个div之后alert(你的div.offsetLeft)就可以看到他现在距离浏览器左边的距离。当然你也可以用他给对象赋值，offset不单单只有Left 还有offsetTop offsetWidth offsetHeight 都是JS里很有用的属性。

谈谈对offsetleft兼容性的理解

转载  2015-11-11   投稿：mrr    我要评论

offsetleft属性具有一定的兼容性问题，在IE7浏览器中，它的返回值是相对于最近的父类元素的左侧的距离，本文通过代码示例给大家介绍offsetleft兼容性问题，小伙伴们一起看看吧

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

此属性具有一定的兼容性问题，那就是在IE7浏览器中，它的返回值是想对于最近的父辈元素的左侧的距离。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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中offsetleft属性的用法（转）的更多相关文章

  1. （转载）详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  2. 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  3. 详解Javascript中prototype属性

    转自:https://www.jb51.net/article/91826.htm 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Jav ...

  4. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  5. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  6. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  7. 详解JavaScript中的Object对象

    Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...

  8. sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序

    转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道 ...

  9. 【转】详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...

随机推荐

  1. windows与VMware ubuntu虚拟机实现文件共享

    本文基本摘自:无限挑战者的博客 本人用的系统是win10系统,应该区别不大,实现的是win10系统和VMWare虚拟机Ubantu系统之间的文件共享.到网上找了很多的方法各种各样的方式,由于对Linu ...

  2. 【leetcode刷题笔记】Single Number

    题目: Given an array of integers, every element appears twice except for one. Find that single one. No ...

  3. web框架之Django<一、初识>

    一.什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的 ...

  4. 20145229 《Java程序设计》第10周学习总结

    20145229 <Java程序设计>第10周学习总结 教材学习内容总结 Java网络编程技术 数据交换 在计算机网络中,现在命名IP地址的规定是IPv4协议,该协议规定每个IP地址由4个 ...

  5. c++大作业五子棋-需求分析与设计方案

    写在前边: 本来上学期就已经完成这个大作业,临近考试太忙. 而且老师最后要查重,就没有把代码放上来. 如需整个工程,移步http://download.csdn.net/detail/sdzuiaid ...

  6. php设计模式课程---4、观察者模式的好处是什么

    php设计模式课程---4.观察者模式的好处是什么 一.总结 一句话总结: 方便选择之后去控制监听的板块数:比如选择男士之后,我可以决定监听广告里面的第二和第三板块. 1.为什么有观察者模式? 错误理 ...

  7. spring mongodb 复制集配置（实现读写分离）

    注:mongodb当前版本是3.4.3   spring连接mongodb复制集的字符串格式: mongodb://[username:password@]host1[:port1][,host2[: ...

  8. spring 4 + jpa(hibernate 3/4) + spring mvc 多数据源配置

    先从persistence.xml开始: <?xml version=”1.0″ encoding=”UTF-8″?><persistence version=”2.1″ xmlns ...

  9. win2008server R2 x64 部署.net core到IIS

    1.下载sdk 和.NET Core Windows Server Hosting   https://www.microsoft.com/net/download  2.出现HTTP 错误 500. ...

  10. 时间复杂度O(n)与空间复杂度O(1)

    把输入规模看成x轴,所花时间/空间看成y轴.O(n)就是 y = x, y随x的增长而线性增长.一条斜线O(1)就是 y = 1,不管x如何变,y不变.一条与x平行的线 举个简单的例子,要从0加到n, ...