The difference between the offsetLeft shallow Left clientLeft
- 2020-03-30 00:39:20
- OfStack
Suppose that obj is an HTML control
Obj. offsetTop refers to the calculated top position, integer, unit pixel of obj relative to the layout or the parent coordinate specified by the offsetParent attribute.
Obj. offsetLeft refers to the calculated left position of obj relative to the layout or parent coordinates specified by the offsetParent attribute, integer, unit pixel.
Obj. OffsetWidth refers to the absolute width of the obj control itself, excluding the part not shown by overflow, that is, the width it actually occupies, integer, unit pixel.
Obj. OffsetHeight refers to the absolute height of the obj control itself, excluding the part not shown by overflow, that is, the actual height it occupies, integer, unit pixel.
Let's take a look at offsetParent.
OffsetParent gets a reference to the container object that defines the properties of the objects offsetTop and offsetLeft. OffsetTop and offsetParent are very complex, and different browsers have different interpretations, and floating interpretations are different, so we generally just need to understand that we can get the absolute position of the control in the browser through them.
The above attributes are also valid in FireFox.
In addition, we refer to the property value of HTML control here, not document.body, and the value of document.body can be interpreted differently in different browsers (in fact, most environments are caused by different interpretations of document.body, not by different interpretations of offset).
We know that offsetTop can get the position of the HTML element from the top or the outer element, and style.top is also ok. The difference between the two is:
OffsetTop returns a number, while style.top returns a string with the unit: px in addition to the number.
Ii. OffsetTop reads only, while style.top reads and writes.
Style.top returns an empty string if the top style is not specified for the HTML element.
The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.
clientHeight
No one has any problem with clientHeight, except that it's the height of the viewable area of the content, which means the height of the area where the content can be seen in the page browser, usually the area below the last toolbar and above the status bar, which has nothing to do with the content of the page.
offsetHeight
IE, Opera thinks offsetHeight = clientHeight + scroll bar + border.
NS and FF think that offsetHeight is the actual height of web content, which can be less than clientHeight.
scrollHeight
IE and Opera believe that scrollHeight is the actual height of web content, which can be less than clientHeight.
NS and FF think that scrollHeight is the height of web content, but the minimum value is clientHeight.
In simple terms
ClientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that both offsetHeight and scrollHeight are the height of web content, except that when the height of web content is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while offsetHeight can be less than clientHeight.
IE and Opera think offsetHeight is the clientHeight scroll bar with a border. ScrollHeight is the actual height of the page content.
In the same way
ClientWidth, offsetWidth, and scrollWidth have the same interpretation as above, except that you can replace the height with the width.
ScrollTop is the height value "rolled up". Example:
<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t"> If it is p Set up scrollTop , these contents may not be fully displayed. </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
Since scrollTop is set for the outer element p, the inner element will be rolled up, which is scrollTop.
ScrollLeft works the same way.
We already know that offsetHeight is the width of its element, and scrollHeight is the absolute width of the inner element, containing the hidden parts of the inner element. In the above, the scrollHeight of p is 300, while the offsetHeight of p is 100.
ScrollWidth works the same way.
1. ClientHeight clientWidth:
These two attributes roughly show the pixel height and width of the element's content
Element margins, borders, and so on.
2. ClientLeft clientTop:
These two return the thickness of the border around the element, and if you don't specify a border or if you don't fix the element, its value is 0.
3. ScrollLeft scrollTop:
If the element is scrollable, these two attributes give you an idea of how far the element has scrolled horizontally and vertically, in pixels.
For elements that cannot be scrolled, these values are always 0.
4.
ScrollHeight scrollWidth:
No matter how many objects are visible on the page, they get the whole.
5. Style. Left:
Locate the offset between the element and the left edge of the rectangle containing it
6. Style. PixelLeft:
Returns the integer pixel value of the locating element's left margin offset. Because the non-pixel value of the attribute returns a string containing units, for example,30px.
7. Style: posLetf:
Returns the quantitative value of the left margin offset of the locating element, regardless of the unit specified by the corresponding stylesheet element.
Top, pixelTop,posTOp.
LEFT: Is the position moved from left to right, that is, the distance between the pendant and the left edge of the screen;
ClientLeft Returns the distance between the value of the object's offsetLeft property and the true value to the left of the current window
OffsetLeft Returns the left value of the layout or coordinate of the object relative to the parent object, which is the X coordinate with the upper left corner of the parent object as the origin of the coordinate, and the positive direction of the X and Y axes as the right and down directions
PixelLeft Sets or returns the position of the object relative to the left of the window
ScrollWidth is the width of the actual content of the object, not the width of the enclosing edges, and will vary with the amount of content in the object (more content may change the actual width of the object).
ClientWidth is the visible width of the object, not the equilateral line of the scrollbar, and changes with the display size of the window.
OffsetWidth is the visible width of the object, the packet scrollbar, etc., which changes with the display size of the window.
IE6.0, FF1.06 + :
ClientWidth = width + padding
ClientHeight = height + padding
OffsetWidth = width + padding + border
OffsetHeight = height + padding + border
IE5.0/5.5:
ClientWidth = width-border
ClientHeight = height-border
OffsetWidth = width
OffsetHeight = height
(note: margin property in CSS, independent of clientWidth, offsetWidth, clientHeight, offsetHeight)
Offsetwidth: is the offsetwidth of an element relative to its parent. Is equal to the border + padding + width
Clientwidth: is the visible width of an element. Is equal to the padding + width
Scrollwidth: is the width of the element and includes the scroll portion.
OffsetLeft: the position of the Html element relative to its own offsetParent element
ScrollLeft: returns and sets the coordinate value of the current horizontal scrolling transaction
<input type="button" value=" click " onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>
Save it as a web page, run it, click on the button, scroll to move
Click div, pop up the position of b relative to a, and then pop up the position of a relative to the window