How to get the height and width function in JavaScript _ javascript skills

This article describes how to obtain the height and width functions in JavaScript, such as obtaining the size of a window, the width of a visible area, the height of a visible area, and the size of an element, for more information, see Html code:

The Code is as follows:

This is the parent element, and the screen resolution is 1366*768

This is a child element. I wish you a happy National Day.

This is Sun Tzu's element. I wish you a happy National Day.
My blog: www.jb51.net
QQ Group for programmers:
259280570
Welcome to join
Happy National Day

Data Output

Css:

The Code is as follows:

*
{
Margin: 0 auto;
}
. Father
{
Width: 500px;
Height: 750px;
Border: 5px solid red;
Float: left;
}
. Son
{
Width: 400px;
Height: 300px;
Border: 5px solid black;
Margin: 20px;
}
. Grandson
{
Width: 150px;
Height: 100px;
Border: 5px solid blue;
Margin: 20px;
Overflow: auto;
}
. Data
{
Width: 600px;
Height: 750px;
Border: 5px solid red;
Float: left;
Margin-left: 15px;
}

Js:

The Code is as follows:

Window. onload = function ()
{
/* Obtain the Element Object */
Var father = document. getElementById ('father ');
Var son = document. getElementById ('son ');
Var grandson = document. getElementById ('grandson ');
Var data = document. getElementById ('data ');
Data. innerHTML = "get window size (related to window size )";
Data. innerHTML + = "document. body visible area width:" + document. body. clientWidth +"
";
Data. innerHTML + = "document. body visible area Height:" + document. body. clientHeight +"
";
Data. innerHTML + = "window. innerWidth visible area width:" + window. innerWidth +"
";
Data. innerHTML + = "window. innerHeight visible area Height:" + window. innerHeight +"
";
Data. innerHTML + = "document.doc umentElement visible area width:" Your document.doc umentElement. clientWidth +"
";
Data. innerHTML + = "document.doc umentElement visible area Height:" Export document.doc umentElement. clientHeight +"
";
Data. innerHTML + = "getting the size of an element (irrelevant to whether a scroll bar exists )";
Data. innerHTML + = ". son's own width (offsetWidth attribute, including left and right borders):" + son. offsetWidth +"
";
Data. innerHTML + = ". son height (offsetHeight attribute, including upper and lower borders):" + son. offsetHeight +"
";
Data. innerHTML + = ". son visible width (clientWidth attribute, excluding left and right borders):" + son. clientWidth +"
";
Data. innerHTML + = ". son visible height (clientHeight attribute, excluding upper and lower borders):" + son. clientHeight +"
";
Data. innerHTML + = "Get. grandson scroll size and visible size ";
Data. innerHTML + = ". grandson rolling width (scrollWidth attribute):" + grandson. scrollWidth +"
";
Data. innerHTML + = ". grandson rolling height (scrollHeight attribute):" + grandson. scrollHeight +"
";
Data. innerHTML + = ". grandson visible width (clientWidth attribute, excluding vertical scroll bars and border):" + grandson. clientWidth +"
";
Data. innerHTML + = ". grandson visible height (clientHeight attribute, excluding horizontal scroll bars and border):" + grandson. clientHeight +"
";
Data. innerHTML + = "Get the size of the. grandson volume (related to the position of the scroll bar )";
Data. innerHTML + = ". The height of the grandson volume (scrollTop attribute, vertical scroll bar slides to the bottom):" + grandson. scrollTop +"
";
Data. innerHTML + = ". Left of the grandson volume (scrollLeft attribute, horizontal scroll bar slides to the rightmost):" + grandson. scrollLeft +"
";
Data. innerHTML + = "getting the browser window location (related to the window size )";
/*
* IE, Chrome, Safari, and Opera all support window. screenLeft and * window. screenTop, but Firxfox does not support these two attributes;
* Firxfox, Chrome, Safari, and Opera all provide support for window. screenX * and window. screenY, but IE does not support these two attributes;
*/
Var leftPos = (typeof window. screenLeft = 'number ')? Window. screenLeft: window. screenX;
Var topPos = (typeof window. screenTop = 'number ')? Window. screenTop: window. screenY;
Data. innerHTML + = "window. screenTop (Y) on the body page:" + topPos +"
";
Data. innerHTML + = "window. screenLeft (X) on the left side of the body page:" + leftPos +"
";
Data. innerHTML + = "Get screen resolution ";
Data. innerHTML + = "high screen resolution (window. screen. height):" + window. screen. height +"
";
Data. innerHTML + = "screen Resolution width (window. screen. width):" + window. screen. width +"
";
Data. innerHTML + = "getting the available height and width of the screen ";
Data. innerHTML + = "high screen resolution (window. screen. availHeight):" + window. screen. availHeight +"
";
Data. innerHTML + = "screen Resolution width (window. screen. availWidth):" + window. screen. availWidth +"
";
Data. innerHTML + = "retrieve. father border size ";
Data. innerHTML + = ". father upper border (clientTop):" + father. clientTop +"
";
Data. innerHTML + = ". father left border (clientLeft):" + father. clientLeft +"
";
Data. innerHTML + = "Get the distance from. son to the parent Element Boundary (corresponding to the border of the margin + parent element )";
Data. innerHTML + = ". son to parent element upper boundary (offsetTop):" + son. offsetTop +"
";
Data. innerHTML + = ". son to the left boundary of the parent element (offsetLeft):" + son. offsetLeft +"
";
}

Ps: there are differences in the browser's resolution of the box, so there will be a small difference in the above data. Attachment.

Complete code:

  
  Test