Home > Developer > Web Develop
JS under Offsetleft,style.left, and the difference in jquery (). LEFT,CSS ("left").
JS under the offsetleftAnd Style.left, as well as jquery's css ("left"), the understanding of positioning is similar, if there is a positioning element in the parent element, it is relative to the previous anchor element (position not static) positioning. It is worth mentioning that if there is no parent element that has been positioned, then offsetleftPoint to IS left edge of document, while Style.leftAnd css ("left")Point to IS left edge of body, if the body defaults to a margin, they get a different value. Also commonplace, CSS ("left") and Style.left are with units "px", and offsetleft no units, in addition, Style.left must be an inline style, or assigned by Style.left in JS, otherwise it will be an empty string (specifying left in inner and outer styles is not valid). While the jquery css ("left") does not have this limitation, it is obvious that the advantage of using jquery to manipulate the DOM is evident. Finally, it is the offset () of jquery. Left, which is always positioned relative to the right edge of the document (often shown as the left edge of the browser), so that jquery can be used in different scenarios to obtain the location of the element, compared to the native JS has a huge advantage.<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
body{
margin:50px;
/**/
}
. wrap{
width:300px;
height:300px;
background-color:red;
left:200px;
position:relative;
}
. inner{
Position:absolute;
width:100px;
height:100px;
left:50px;
Background-color:blue;
}
</style>
<script type= "Text/javascript" src= "Js/lib/bootstrap/js/jquery-1.11.3.js" ></script>
<body>
<div class= "wrap" id= "wrap" style= "left:200px;" >
<div class= "inner" id= "inner" >
</div>
</div>
<script type= "Text/javascript" >
Console.log ($ (". Wrap"). CSS ("left")); /* If the parent element has positioned elements, it is positioned relative to the previous anchor element (position not static). Here, relative to the left side of the body, there are units 200px*/
Console.log ($ (". Wrap"). Offset (). left); /* It is always positioned relative to the left edge of the document (often shown as the left edge of the browser) without unit 249.9999999 */
Console.log (document.getElementById ("wrap"). offsetleft); /* If there is no parent element that has been positioned, then offsetleft points to the left edge of the document that does not have a unit 250*/
Console.log (document.getElementById ("wrap"). Style.left); The/*style.left and CSS ("left") point to the body with a unit 200px/
Console.log ($ (". Inner"). CSS ("left")); /* Relative to the previous positioning element 50px */
Console.log ($ (". Inner"). Offset (). left); /* The left edge of the document does not have a unit 300*/
Console.log (document.getElementById ("inner"). offsetleft); /* Relative to the previous level no unit 50*/
Console.log ("If Style.left is not specified in inline style:" +document.getelementbyid ("inner"). Style.left);
</script>
</body>
$ (". Wrap"). CSS ("left") 200px
$ (". Wrap"). Offset (). Left 250
document.getElementById ("wrap"). Offsetleft 250
document.getElementById ("wrap"). Style.left 200px
$ (". Inner"). CSS ("left") 50px
$ (". Inner"). Offset (). Left 300
document.getElementById ("inner"). Offsetleft 50Summary: 1. With offset, there is no unit px, JS in the Offsetleft no unit, jquery in the offset () No units, others have units
Offset () of 2.jquery. Left, which is always relative to the document's right edge, not body!!!JS under Offsetleft,style.left, and the difference in jquery (). LEFT,CSS ("left").
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
