Home > Article > Web Front-end > Detailed explanation of the usage of offsetleft attribute in javascript_javascript skills

Detailed explanation of the usage of offsetleft attribute in javascript_javascript skills

WBOYOriginal: 2016-05-16 15:32:441794browse

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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript retractable menu bar implementation code_javascript skillsNext article：JavaScript retractable menu bar implementation code_javascript skills

See more

Detailed explanation of the usage of offsetleft attribute in javascript_javascript skills

Related articles