The box model in JS

When it comes to box models, the first time you think of CSS box models, the box models in CSS include (content area + inner margin + border). How to get these attribute values in JS? Let's learn the box model in JS.

CSS Styles

{    margin: 0;     padding: 0;}  {    position: absolute;     Margin: 10px;     padding: 10px;     width: 100px;     height: 100px;     Border: 10px solid #000;     line-height: 25px;}

HTML structure

<class= " box" ID= "box">     JS box model of the front-end learning Path The front-end learning path JS box model front-end learning way JS Box model front-end Learning path JS box model </div>

1.client Series

Clientwidth/clientheight if the width of the container is not set, the inner margin is used to open it, and the actual width of the content plus the inner margin is obtained. If you set the width to high, the height is the set width plus the padding.

Clientleft/clienttop width of border

1 var box=document.getelementbyid ("box"); 2 //  - 3 //  - 4 // Ten 5 // Ten

2.offset Series

Offsetwidth/offsetheight (clientwidth+clientleft*2), (clientheight+clienttop*2)

Offsetleft/offsettop margin relative to parent box

OffsetParent Box's parent box

1 //  $ 2 //  $ 3 // Ten 4 // Ten 5 // Body

3.scroll Series

Scrollwidth/scrollheight If the content does not overflow, the value is the same as clientwidth/clientheight. If the content overflows:

ScrollWidth: Actual overflow content width + left padding

ScrollHeight: Actual overflow content height + on fill

ScrollTop: Height of Scroll strip volume

ScrollLeft: Width of scroll strip roll

1 //  - 2 //  - 3 Console.log (box.scrolltop);  // 0 4 // 0

Get, set browser box model information compatible notation

document.documentelement.clientwidth| | Document.body.clientWidth

Encapsulates a function Get set box model

1 function win (attr, value) {2     if (typeof value = = = "undefined") {3         return document.documentelement[attr] | | document.body[attr]; 4     }5     document.documentelement[attr] = value; 6     DOCUMENT.BODY[ATTR] = value; 7 }

This is JS in the box model, often used in development, and these properties are easy to remember confusion, to often practice, to master, tomorrow is the Mid-Autumn Festival, here I wish you a happy Mid-Autumn Festival!!!

<div class= "box" id= "box" > Front-end Learning path JS box model front-end learning way JS Box model front-end learning way JS Box model front-end Learning path JS box model </div>

The box model in JS