详解 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

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

代码实例:

                               
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"author"
content=
""
/>
<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元素是第一个定位父辈元素。

                               
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"author"
content=
""
/>
<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元素左侧的尺寸。

此属性具有一定的兼容性问题，具体可以参阅。

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

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

谈谈对offsetleft兼容性的理解

转载 2015-11-11 投稿：mrr

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

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

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

                                  
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"author"
content=
""
/>
<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的位置。

转载于:https://www.cnblogs.com/lianghong/p/8427244.html

你可能感兴趣的文章