JavaScript size, Position, overflow

Offsetwidth: The width of the element, including the border, the content, the padding.

Second, offsetheight: the height of the element, including the border, content, padding.

Offsetleft: The x-coordinate of the element (relative to the most recently positioned ancestor element, if not the window).

Iv. OffsetTop: The y-coordinate of the element (relative to the most recently positioned ancestor element, if not the window).

V. clientwidth: the width of the element, excluding the border, including only content and padding.

Vi. clientheight: The height of the element, excluding the bounding rectangle, containing only the content and padding.

ClientLeft: The horizontal distance (that is, the width of the left border) of the outer edge of the inner margin of the element, and the width of the scroll bar if there is a scrollbar.

ClientTop: The vertical distance (that is, the width of the top margin) of the outer edge of the inner margin of the element and the outer border, or the width of the scrollbar if there is a scroll bar.

Example: HTML code:

    <DivId= "Div1"Style= "width:500px;height:300px;margin-left:100px;margin-top:100px; border:5px solid red;padding:3px; "><PId= "P1"> I was the first P</P><PId= "P2" </ p> <p id= "P3" > I'm the third p< Span style= "color: #0000ff;" ></p> <p id= "P4" > I'm the fourth p< Span style= "color: #0000ff;" ></p> </< Span style= "color: #800000;" >div>           

JavaScript code:

Window.onload =function() {var div1 = document.getElementById ("Div1"); document.getElementById ("P1"). Textcontent = "Div1 offsetwidth is:" +Div1.offsetwidth; document.getElementById ("P2"). Textcontent = "Div1 offsetheight is:" + div1.offsetheight; document.getElementById ( "P1"). Textcontent + = "; Div1 's offsetwidth is: "+ div1.clientwidth; document.getElementById (" P2 "). Textcontent + ="; The offsetheight of Div1 is: "+ div1.clientheight; document.getElementById (" P3 "). Textcontent =" Div1 offsetleft is: "+  Div1.offsetleft; document.getElementById ("P4"). Textcontent = "Div1 OffsetTop is:" + div1.offsettop; document.getElementById ("P3"). Textcontent + = "; Div1 's ClientLeft is: "+ Div1.clientleft; document.getElementById (" P4 "). Textcontent + ="; Div1 's ClientTop is: "+ div1.clienttop;}       

Actual effect:
　　　　　　　　　　　　

Nine, the content area of the scrollwidth element plus the inner margin plus the size of the horizontal overflow content. If no overflow is the same as clientwidth. That means the scrollwidth-clientwidth is the size of the overflow.

The content area of the scrollheight element plus the inner margin plus the size of the vertical overflow content. If there is no overflow Eoin clientheight the same.

Xi. ScrollLeft When an element has a scrollbar, this property can read and set the horizontal position of the scroll bar.

12. ScrollTop when an element has a scrollbar, this property can read and set the vertical position of the scroll bar.

HTML code:

    <DivId= "Div1"Style= "width:500px;height:300px;margin-left:100px;margin-top:100px; border:5px solid red;padding:3px; Overflow:scroll; "><div id= "div2" style= "width:700px;height:500px;" > </div> <input type= "button" value= "View Scroll"  OnClick= "fun1 ()" /> </div>        

JavaScript code:

function fun1 () {  var div1 = document.getElementById ("Div1")  alert ("ScrollWidth:" + Div1.scrollwidth + "; scrolltop:" + Div1.scrolltop + "; scrollleft" + Div1.scrollwidth + "; scrolltop" + Div1.scrolltop ); }

Effect

　　　　　　　　　　

13. OffsetParent returns the recently positioned parent element.

HTML code:

    <id= "div1" class= "Div1class" style= "position:relative;" <ID= "div2"</div</div>      

JavaScript code:

        function () {            var div2 = document.getElementById ("Div2")            alert (div2.offsetParent.className);        } 

Execution Result: Popup div1class that is, div2 the class= "Div1class" of the recently positioned parent element

JavaScript size, Position, overflow