Dom_ of JavaScript gets the actual size of the element

First, clientwidth and clientheight　

This set of properties can get the size of the visual area of an element, and the amount of space occupied by the element's content and padding.

Returns the element size, but no unit, the default unit is PX, if you forcibly set the unit, such as 100EM, it will return the size of PX. (CSS gets it, you get it according to the style you set).

 <script type= "Text/javascript" > window.onload  = function   { var  box = DOCUMENT.G        Etelementbyid ("box"  // 200  alert (box.clientheight); // 200    </script><style type= "Text/css" >         aaa{background: #ccc;        width:200px;    height:200px; }  </style>

For the actual size of the element, clientwidth and ClientHeight are understood as follows:
1. Add frame, no change, 200;
2. Increase margin, no change, 200;
3. Increase the scroll bar, the final value is equal to the original size minus the size of the scroll bar, 184;
4. Increase the inner margin, the final value is equal to the original size plus the size of the inner margin, 220;

If you do not set any CSS width and height, IE 6,7,8 browser returns 0. Then other browsers calculate the size of the scroll bar and padding.

<script type= "Text/javascript" >    function() {        var box = document.getElementById ("box");         //             plus the inner margin.        //             plus the     padding     }</script><style type= "Text/css" >    . aaa{        background: #ccc;        width:200px;        height:200px;        border:20px solid red;        margin:30px;        padding:10px;    } </style>
Ii. ScrollWidth and ScrollHeight　
This set of properties can get the element size of the scrolled content.
The element size is returned, and the default unit is PX.
<script type= "Text/javascript" >    function() {        var box = document.getElementById ("box");         //  $        //  $     }</script><style type= "Text/css" >    . aaa{        background: #ccc;        width:200px;        height:200px;    } </style>
If you do not set the width and height of any CSS, it will get the calculated widths and heights.
 <script type= "Text/javascript" > window.onload  = function   { var  box = DOCUMENT.G        Etelementbyid ("box"  // alert (box.scrollwidth);  //   </script><style type= "Text/css" >     aaa{background: #ccc; }  </style>
For the actual size of the element, ScrollWidth and ScrollHeight understand the following:
1. Add a border, different browsers have different explanations:
A) Firefox and Opera browsers will increase the size of the border
b) IE, Chrome and Safari browser will ignore border size
c) IE Browser only displays the height of its original content
2. Increase the padding, the final value will be equal to the original size plus the size of the inner margin
3. Increase the scroll bar, the final value will be equal to the original size minus the scroll bar size
4. Increase the margin, no change.
5. Add content overflow, Firefox, Chrome and IE get the actual content height, Opera compared to the top three browser to get a small height, Safari than the top three browsers get high.
Iii. offsetwidth and Offsetheight
This set of properties returns the actual size of the element, including the bounding rectangle, padding, and scroll bars.
<script type= "Text/javascript" >    function() {        var box = document.getElementById ("box");         //  -        //  -      </script><style type= "Text/css" >    . aaa{        background: #ccc;        width:200px;        height:200px;        border:10px solid red;        padding:10px;    } </style>
If you do not set any CSS width and height, he will get the calculated widths and heights that are the default width and height.
<script type= "Text/javascript" >    function() {        var box = document.getElementById ("box");         // 1350        // 18, Firefox     }</script><style type= "Text/css" >    . aaa{        background: #ccc;    } </style>
For the actual size of the element, Offsetwidth and offsetheight understand the following:
1. Increase the border, the final value will be equal to the original size plus the border size, 220;
2. Increase the inner margin, the final value will be equal to the original size plus the inner margin size, 220;
3. Increase the margin, without change;
4. Add scroll bar, no change, no decrease;
For the acquisition of the element size, it is generally a block-level element and is more convenient to set the element of the CSS size. This is especially problematic if inline elements (inline) or elements with no size set
Dom_ of JavaScript gets the actual size of the element