JS gets the actual width height of the HTML element

Case one: The width and height are all written in the style table, that is, an external style or inline style, such as #div1{width:120px;}. This situation can not be reached by #div1.style.width width, but through the #div1.offsetwidth to obtain the width.

Situation two: wide and High is written in the middle, that is, inline style, such as style= "width:120px;", in this case through the above 2 methods can be obtained width.

Because Id.offsetwidth and id.offsetheight ignore styles in style sheets or rows, it's best to use these 2 attributes when we get the element width and height. Note If you do not write a property in a style within a row, you cannot get it through ID.STYLE.ATRR.

Code:
var $ = document.getElementById ("View");
var h = $.offsetheight; Height
var w = $.offsetwidth; Width

Today's front-end productions seldom write styles directly in style, they are written in the style table. If you want to get a style that doesn't correspond (i.e. #div1.style.width and # The value of div1.offsetwidth is not equal, because the offset calculation includes padding and border, which can only be used to get the properties of the stylesheet without a browser, as follows:

IE8 and Previous versions: via Currentstyle

Alert (document.getElementById (' id '). currentstyle.width);

FF,SAFARI,OPERA,CHROME,IE9 and later versions: via window.getComputedStyle

var El=document.getelementbyid (' id ');

Alert (window.getComputedStyle (el,null). width);

Appendix: Style Classification
external style External style Sheet
A file with a CSS extension (also known as a "hypertext style sheet" file) can be scoped to multiple pages, or to the entire site, or even to a different site. can be applied after linking to the Web page.
inline style internal style Sheet (<style></style>)
The style settings contained within the page are scoped to the embedded Web page.
Inline styles Inline style
In an HTML document, the formatting information of an inline style sheet is inserted directly into the HTML tag of the applied page element, as an attribute parameter to its HTML tag. Strictly speaking, inline style sheets are not called tables, but are simply HTML tags.
When the same style appears, the precedence is inline greater than the inline style, and the inline style is larger than the outer style.

JS gets the actual width height of the HTML element