On the knowledge carding of JS box model

13 Common properties in the box model JS box model:

• clientwidth/clientheight: Width height of viewable area, width height +padding composition
• clienttop/ ClientLeft: Width of top and left borders
• offsetwidth/offsetheight:clientwidth/clientheight+border
• OffsetParent: Parent reference, the parent element does not necessarily have a relationship, the default element of the parent reference is body, if you set the positioning, you can change the default parent referential
• offsetleft/ OFFSETTOP: The outer frame of the current element is offset from the inner border of the parent reference (left/top) =>IE8 is the outer frame of the current element that is offset from the bounding box of the parent reference
• scrollwidth/ ScrollHeight: The width and height of the actual content of the current element, in the absence of content overflow, and the value of Clientwidth/clientheight, but in the case of overflow, scrollheight gets the value is up padding + The height of the real content (because the browser is not quite the same as the font, so we get the result is about equal to the value, and whether this is Overflow:hidden will also affect the result)
• scrolltop/ ScrollLeft: If there is a content overflow in the current region, and we also let it have a scrollbar, then these two properties get the width and height of the scroll bar volume
  • 1, Scrolltop/scrollleft is the only one of 13 properties can read and write, The rest are read-only
  • 2, the results obtained by the properties of the JS box model are integers (it rounds the decimal values by default, and the obtained values are non-units)
  • 3, if the entire page, whether it be acquired or set, is to be compatible, Need to write two sets: Document.documentelement.xxx=xxx; document.body.xxx=xxx;
  • 4, JS box model, get the style values are composite values, if you want to get a single specific style value (for example: I want to get width or paddingleft) Use these 13 properties will not be

Gets the specific style property value of the current element

Three main ways of browser compatibility detection in JS

• Using try, CATCH

• Current browser information monitoring to determine compatibility

• Verifies whether the currently-used properties and methods are in the current object

On the knowledge carding of JS box model