Home > Developer > Web Develop
When manipulating DOM nodes in JavaScript to make them move, it often involves various concepts such as width and height and position coordinates, and without a good understanding of the meaning of these attributes, the motion principle of JS cannot be understood, and because of the many concepts of these attributes, plus the browser
The implementation of different ways, often resulting in conceptual confusion, after the study, here to make a summary.
First part: Dom object
1.1 Read-only properties
The so-called read-only attribute refers to the intrinsic properties of the DOM node, the property can only be obtained by JS to get and cannot be set by JS, and the obtained value is only the number of units (PX,EM, etc.), as follows:
1) clientwidth and clientheight
This property refers to the visible part width and height of the element, that is, padding+content, if there is no scrollbar, which is the height and width of the element, and if a scrollbar is present, the width of the element is obscured by the scrollbar, then the property is the width and height of the width minus the scroll bar.
Css:
<style> .One { width: 200px; Height: 200px; background: Red; Border: 1px solid #000000; overflow: auto; } </style>Html
<Body><Divclass= "One">JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR></Div></Body>
Js
<script> window.onload=function() { var odiv= document.getElementsByTagName (' div ') [0]; Console.log (odiv.clientwidth+ ":" +odiv.clientheight); } </script>Results:
The element would have been set to a width of 200, that is, the visible part of the width is 200, but because of the vertical scroll bar, occupy the width of the visible part, so clientwidth becomes 183, and ClientHeight is still 200.
2) offsetwidth and offsetheight
This pair of attributes refers to the width and height of the element's border+padding+content, whether the property and its internal contents are outside the element size, only the border and width and height that were set.
The CSS and HTML sections are the same as the JS section as follows:
<script> window.onload=function() { var odiv= document.getElementsByTagName (' div ') [0]; Console.log (odiv.offsetwidth+ ":" +odiv.offsetheight); } </script>Final Result:
You can see that this property is more than the width and height of the set border border compared to ClientWidth and clientheight.
3) ClientTop and ClientLeft
This pair of properties is used to read the width and height of the element's border.
As1
<style> body{ border: 2px solid #000000; } .One { border: 1px solid red; Width: 100px; height: 100px; background: red; } </style>Html
< Body > < class= "One"></div></ Body >
Js
<script> var odiv=document.getelementsbyclassname (' one ') [0]; Console.log (odiv.clientleft+ ":" +odiv.clienttop);
</script>Final Result:
You can see that the div's border is set to a width of 1px, which is shown here
4) Offsetleft and offsettop
Speaking of this pair of attributes need to say offsetparent, the so-called offsetparent refers to the current element of the nearest to their own location (position: Absolute or position:relative) a parent element (not just a direct parent element, as long as it is a parent element), which is the offsetparent of the current element, and if you look up from that element, you cannot find such a parent element. Then the offsetparent of the current element is the BODY element. Offsetleft and offsettop refer to the current element, relative to its offsetparent left and top distance, i.e. the distance from the current element's border to offsetparent that contains it is as follows:
As1
<style>.{position:relative;width:200px;Height:200px;Border:1px solid Green; }. One{width:100px;Height:100px;background:Red;margin:20px;Border:1px solid #000000;position:Absolute;Top:20px; }</style>
Html
< Body > < class= "One"><class= "one" > </ Div > </ Div > </ Body >
Js
<script> var odiv=document.queryselector ('. one '); Console.log (odiv.offsettop+ ":" +odiv.offsetleft); </script>Final Result:
Here let Div.two relative positioning, let div.one absolutely positioning, so Div.two is one offsetparent, at the same time, and give Div.one added a margin for 20px, so here it's offsettop for 40, Offsetleft was originally 0, but with margin 20 it became 20.
5) Scrollheigh and ScrollWidth
As the name implies, these two properties refer to the actual width and height of the content inside the element when the content inside the element exceeds its width and height, and it is important to note that the property is not taken when the content of the element does not exceed its height or width.
Css
<style> .One { width: 100px; Height: 100px; overflow: auto; } </style>Html
<Body><Divclass= "One">I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR>I am the content<BR></Div></Body>
Js
<script> var odiv=document.queryselector ('. one '); Odiv.onscroll=function() { Console.log (this. scrollheight+ ":" + this . scrollwidth); } </script>
Final result
Although the width of the div is 100, its scrollheight of 234 shows the actual height of the content, ScrollWidth is 83 (because the scrollbar occupies the width)
1.2 Readable writable Properties
The so-called readable writable property refers to not only the value of the property can be obtained by JS, but also can be assigned to the property via JS.
1) scrolltop and ScrollLeft
This property is read-write and refers to the height and width of the element being rolled up when the content of the element exceeds its wide height.
The CSS and HTML sections are the same as the JS section as follows:
<script> var odiv=document.queryselector ('. one '); Odiv.onscroll=function() { Console.log (this. scrolltop+ ":" + this . scrollleft); } </script>Final Result:
As the scrollbar is dragged, the value of the ScrollTop property is increasing, and there is no scroll bar in the horizontal direction, so ScrollLeft has been 0.
This property can also automatically scroll to a location by assigning content, JS as follows:
<script> var odiv=document.queryselector ('. one '); Odiv.scrolltop=20; Odiv.onscroll=function() { Console.log (this. scrolltop+ ":" + this . scrollleft); } </script>The results are as follows:
By directly setting the DIV's scrolltop, let it be displayed directly on the scroll bar in the 20 vertical direction 20 position.
2) Obj.style.* Property
For a DOM element, its Style property returns an object whose properties are readable and writable. such as Obj.style.top,obj.style.wdith and so on, when reading, they return the value is often with units (such as PX), at the same time, for this way,
It can only get the inline style of the element, and cannot get the final calculated style of the element, which is the difference between reading the property and the above read-only attribute, and to get the calculated style, use Obj.currentstyle (IE) and getComputedStyle ( Browser outside of IE). On the other hand, these properties can be assigned value, JS motion principle is to change the values of these properties to achieve its position changes, it should be noted that the value of these attributes need to take units with the unit, otherwise does not take effect.
Part II Event object
In JS, an event object is usually involved in the movement of an element, and there are many positional attributes of the event object, and this is explained here as browser compatibility issues can cause confusion among these properties.
1) Clientx and Clienty, which are the coordinates of the mouse click position relative to the browser (visible area) When the event occurs, that is, the coordinates of the upper-left corner of the browser (0,0), which is the origin of the upper-left corner of the browser, calculates the position of the mouse click position from its upper-left corner,
Regardless of the size of the browser window, the coordinates of the click position are not affected.
Js
<script> var odiv=document.queryselector ('. one '); Odiv.onclick=function(EV) { var evt=ev| | event; Console.log (Evt.clientx+ ":" +evt.clienty); } </script>Results:
2) Screenx and Screeny are the coordinates of the mouse relative to the screen at the time of the event, and the upper-left corner of the device screen is the origin, where the mouse click is the Screenx and Screeny value of the point, as shown below:
You can see that although the browser window is indented to a small size, the coordinate values are large because they are relative to the screen coordinates and not the browser coordinates.
3) OffsetX and OffsetY
This pair of attributes refers to the location of the mouse click position relative to the event source when the event occurs, i.e. click the div to calculate the coordinates of the mouse click position as the origin in the upper left corner of the Div, as shown below:
You can see, click on the div near the upper left corner, its offsetx and offsety is 1, 0, it should be noted that Ie,chrome,opera support the property, but Firefox does not support the property, Firefox, the concept corresponding to this property is, Event.layerx and Event.layery, so when you need a compatible browser, get the mouse click position compatible with the coordinates of the event source as Var disx=event.offsetx| | Event.layerx.
4) Pagex and Pagey
As the name implies, this property is the position of the mouse click position relative to the page when the event occurs, usually when no scroll bar appears in the browser window. This property is equivalent to Event.clientx and Event.clienty, but when the browser appears with a scrollbar, Pagex is usually greater than clientx because the page also has the width and height of the part that is being rolled up, as shown below:
Pagex and Pagey are larger than Clientx and clienty because of the vertical and horizontal scroll bars appearing in the browser.
The two are equal when the browser's scroll bar is not dragged or if the browser does not have a scroll bar.
A summary of various widths and positions in JS
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
