<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Offsetwidth, clientwidth, width, scrollwidth differences and the way JS and jquery get</title><Scripttype= "Text/javascript"src= "Jquery.min.js"></Script></Head><Bodystyle= "border:1px solid #ccc"> <DivID= "Div"style= "width:100px;height:80px;left:10px;top:8px;position:relative;border:1px solid #ccc; margin:20px 10px;padding : 7px 6px; "> </Div> <Scripttype= "Text/javascript"> varDivobj=document.getElementById ("Div"); varDoffsetwidth=Divobj.offsetwidth;//returns the width of an element (including element width, padding, and border, excluding margins) var$dOffsetWidth=$ (divobj). Outerwidth (false);//parameter is true, including margin varDoffsetheight=Divobj.offsetheight;//returns the height of an element (including element height, padding, and border, excluding margins) var$dOffsetHeight=$ (divobj). Outerheight (false);//parameter is true, including margin varDclientwidth=Divobj.clientwidth;//returns the width of an element (including element width, padding, excluding borders and margins) var$dClientWidth=$ (divobj). Innerwidth (); varDclientheight=Divobj.clientheight;//returns the height of an element (including element height, padding, excluding borders and margins) var$dClientHeight=$ (divobj). Innerheight (); varDwidth=DivObj.style.width;//returns the width of the element (including the width of the element, excluding padding, borders, and margins) var$dWidth=$ (divobj). width ();//Width (val) Setting width varDheight=DivObj.style.height;//returns the height of the element (including the element height, excluding padding, borders, and margins) var$dHeight=$ (divobj). Height ();//height (val) set high varDscrollwidth=Divobj.scrollwidth;//returns the width of the element (including element width, padding, and overflow dimensions, excluding borders and margins), no overflow, same as clientwidth varDscrollheight=Divobj.scrollheight;//returns the height of the element (including element height, padding, and overflow dimensions, excluding borders and margins), no overflow, same as clientheightConsole.log ("Doffsetwidth:"+Doffsetwidth+", Doffsetheight:"+Doffsetheight+", Dclientwidth:"+Dclientwidth+", Dclientheight:"+Dclientheight+", Dwidth:"+Dwidth+", Dheight:"+Dheight+", Dscrollwidth:"+Dscrollwidth+", Dscrollheight:"+dscrollheight); Console.log ("$dOffsetWidth:"+$dOffsetWidth+", $dOffsetHeight:"+$dOffsetHeight+", $dClientWidth:"+$dClientWidth+", $dClientHeight:"+$dClientHeight+", $dWidth:"+$dWidth+", $dHeight:"+$dHeight); /*Note: The difference between offsetwidth (offsetheight) and Style.width (style.height) 1. Style.height returns a string, such as 28PX,OFFSETW Idth returns a value of 28, if it is necessary to calculate the value obtained, it is convenient to use offsetwidth, if you get offsetwidth set style.left value, you need to add ' px '. 2. Style.width/style.height and Scrollwidth/scrollheight are readable and writable properties, Clientwidth/clientheight and offsetwidth/ Offsetheight is read-only property 3. The value of style.height needs to be defined beforehand, otherwise the value to be taken is null. and must be defined in the HTML, if defined in the CSS, the value of Style.height is still empty, but the element offset is valid, while the offsetwidth can still be taken. */ /*Summary: 1, through Style.width (style.height) or jquery's $ (divobj). Width ()/$ (divobj). Height () gets/sets the width height of the element 2. To get the width of the element containing the border, you can pass Divobj.offsetwidth/divobj.offsetheight or jquery's $ (divobj). Outerwidth (False)/$ (divobj). Outerheight (False) gets 3, through $ (divobj). Outerwidth (True)/$ (divobj). Outerheight (True) gets the width of the margin 4, through $ (divob j). Innerwidth ()/$ (divobj). Innerheight () Gets a width that does not contain a border and does not contain margins*/ </Script></Body></HTML>
Technical Exchange QQ Group: 15129679
Offsetwidth, clientwidth, width, scrollwidth differences and the way JS and jquery get