HTML code:
Copy Code code as follows:
<body>
<div class= "Father" id= "Father" >
<div class= "son" id= "son" >
<div class= "grandson" id= "grandson" >
</div>
</div>
</div>
<div class= "Data" >
<div id= "Data" ></div>
</div>
</body>
Css:
Copy Code code 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:
Copy Code code as follows:
Window.onload = function ()
{
/* Get Element Object/*
var father = document.getElementById (' father ');
var son = document.getElementById (' son ');
var grandson = document.getElementById (' grandson ');
var data = document.getElementById (' data ');
data.innerhtml = "data.innerhtml + = "document.body visible area wide:" +document.body.clientwidth+ "<br/>";
data.innerhtml + = "document.body visible area High:" +document.body.clientheight+ "<br/>";
data.innerhtml + = "window.innerwidth visible area wide:" +window.innerwidth+ "<br/>";
data.innerhtml + = "window.innerheight visible area High:" +window.innerheight+ "<br/>";
data.innerhtml + = "document.documentelement visible area wide:" +document.documentelement.clientwidth+ "<br/>";
data.innerhtml + = "document.documentelement visible area High:" +document.documentelement.clientheight+ "<br/>";
data.innerhtml + = "Data.innerhtml + = ". Son width (offsetwidth property, including left and right border):" +son.offsetwidth+ "<br/>";
Data.innerhtml + = ". Son Height (offsetheight property, including upper and lower borders):" +son.offsetheight+ "<br/>";
Data.innerhtml + = ". Son visual Width (clientwidth property, excluding left and right border):" +son.clientwidth+ "<br/>";
Data.innerhtml + = ". Son visual Height (clientheight property, excluding up and down borders):" +son.clientheight+ "<br/>";
data.innerhtml + = "Data.innerhtml + = ". Grandson scrolling Width (scrollwidth property):" +grandson.scrollwidth+ "<br/>";
Data.innerhtml + = ". Grandson scrolling Height (scrollheight attribute):" +grandson.scrollheight+ "<br/>";
Data.innerhtml + = ". Grandson Visual width (clientwidth property, excluding vertical scroll bars and border):" +grandson.clientwidth+ "<br/>";
Data.innerhtml + = ". Grandson Visual Height (ClientHeight property, excluding horizontal scroll bars and border):" +grandson.clientheight+ "<br/>";
data.innerhtml + = "Data.innerhtml + = "grandson is rolled high (scrolltop attribute, vertical scroll bar to bottom):" +grandson.scrolltop+ "<br/>";
Data.innerhtml + = ". Grandson Left (scrollleft attribute, horizontal scroll bar slide to the right end):" +grandson.scrollleft+ "<br/>";
data.innerhtml + = "/*
*ie, Chrome, Safari, Opera all provide support for window.screenleft and *window.screentop, but Firxfox does not support the two attributes;
*firxfox, Chrome, Safari, Opera all provide support for Window.screenx * and Window.screeny, but IE does not support this two attributes;
*/
var leftpos = (typeof window.screenleft = ' number ')? Window.screenLeft:window.screenX;
var toppos = (typeof window.screentop = ' number ')? Window.screenTop:window.screenY;
data.innerhtml + = "Body Web page (window.screentop (Y)):" + toppos+ "<br/>";
data.innerhtml + = "Body page text part left (Window.screenleft (X)):" + leftpos+ "<br/>";
data.innerhtml + = "data.innerhtml + = "high screen resolution (Window.screen.height):" + window.screen.height+ "<br/>";
data.innerhtml + = "screen resolution width (window.screen.width):" + window.screen.width+ "<br/>";
data.innerhtml + = "data.innerhtml + = "high screen resolution (Window.screen.availHeight):" + window.screen.availheight+ "<br/>";
data.innerhtml + = "screen resolution width (window.screen.availWidth):" + window.screen.availwidth+ "<br/>";
data.innerhtml + = "Data.innerhtml + = ". Father Top Border (clienttop):" + father.clienttop+ "<br/>";
Data.innerhtml + = ". Father left Box (clientleft):" + father.clientleft+ "<br/>";
data.innerhtml + = "Data.innerhtml + = ". Son to parent element Upper boundary (offsettop):" + son.offsettop+ "<br/>";
Data.innerhtml + = ". Son to the left boundary of the parent element (Offsetleft):" + son.offsetleft+ "<br/>";
}
PS: The browser to the box resolution there are differences, so the above data will have a small difference. A picture.
Complete code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
