Detailed explanation of the usage of offsetleft attribute in javascript

Detailed explanation of the usage of offsetleft attribute in javascript_javascript skills

WBOY

Release： 2016-05-16 15:32:44

Original

1807 people have browsed it

This attribute can return the distance between the current element and the left edge of a parent element. Of course, this parent element is also particular.

(1). If there is a positioned element in the parent element, then the distance to the edge of the positioned element closest to the current element is returned.
(2). If there is no positioning element in the parent element, then the distance relative to the left edge of the body is returned.

Grammar structure:

obj.offsetleft

Special note: This attribute is read-only and cannot be assigned a value.

Code example:

<!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>

Copy after login

The above code can return the distance between the inner element and the left side of the main element, because the main element is the first positioned parent element.

<!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>

Copy after login

The above code returns the size of the inner element from the left side of the body element.

This attribute has certain compatibility issues. For details, please refer to the chapter A brief introduction to offsetleft compatibility .

ps: What is the specific role of the offsetLeft attribute in js?

You can determine the left distance between an object and the document, which is the left edge of the browser. For example, if you write a div and get the div, you can use alert (your div.offsetLeft) to see its current distance from the left side of the browser. Of course, you can also use it to assign values to objects. Offset is not only Left but also offsetTop, offsetWidth and offsetHeight, which are all very useful properties in JS.