html code:
The code copy is as follows:
<body>
<div id="father">
<h3>This is the parent element, the screen resolution is 1366*768</h3>
<div id="son">
<h3>This is a child element, I wish you all a happy National Day</h3>
<div id="grandson">
<h3>This is the element of grandson, I wish you all a happy National Day</h3>
<h3>My Blog: www.VeVB.COM</h3>
<h3>Program enthusiast QQ group:</h3>
<h3>259280570 </h3>
<h3>Welcome to join</h3>
<h3>Happy National Day</h3>
</div>
</div>
</div>
<div>
<h3>Data output</h3>
<div id="data"></div>
</div>
</body>
css:
The code copy 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 copy is as follows:
window.onload = function()
{
/*Get element object*/
var father = document.getElementById('father');
var son = document.getElementById('son');
var grandson = document.getElementById('gradson');
var data = document.getElementById('data');
data.innerHTML = "<h3>get the window size (related to the window size)</h3>";
data.innerHTML += "document.body visible area width: "+document.body.clientWidth+"<br/>";
data.innerHTML += "document.body visible area height: "+document.body.clientHeight+"<br/>";
data.innerHTML += "window.innerWidth visible area width: "+window.innerWidth+"<br/>";
data.innerHTML += "window.innerHeight visible area height: "+window.innerHeight+"<br/>";
data.innerHTML += "document.documentElement visible area width: "+document.documentElement.clientWidth+"<br/>";
data.innerHTML += "document.documentElement visible area height: "+document.documentElement.clientHeight+"<br/>";
data.innerHTML += "<h3>gets the element's own size (not related to whether there is a scroll bar)</h3>";
data.innerHTML += ".son's own width (offsetWidth property, including left and right borders): "+son.offsetWidth+"<br/>";
data.innerHTML += ".son's own height (offsetHeight property, including upper and lower borders): "+son.offsetHeight+"<br/>";
data.innerHTML += ".son visual width (clientWidth attribute, excluding left and right borders): "+son.clientWidth+"<br/>";
data.innerHTML += ".son visual height (clientHeight property, excluding upper and lower borders): "+son.clientHeight+"<br/>";
data.innerHTML += "<h3>gets.gradson scroll size and visual size</h3>";
data.innerHTML += ".gradson scroll width (scrollWidth property): "+gradson.scrollWidth+"<br/>";
data.innerHTML += ".gradson scroll height (scrollHeight property): "+gradson.scrollHeight+"<br/>";
data.innerHTML += ".gradson visual width (clientWidth property, excluding vertical scroll bars and border): "+gradson.clientWidth+"<br/>";
data.innerHTML += ".gradson visual height (clientHeight property, excluding horizontal scroll bars and border): "+gradson.clientHeight+"<br/>";
data.innerHTML += "<h3>gets the size of the rolled .gradson (related to the position of the scroll bar)</h3>";
data.innerHTML += ".gradson is rolled off high (scrollTop property, vertical scroll bar slides to the bottom): "+gradson.scrollTop+"<br/>";
data.innerHTML += ".gradson is rolled off the left (scrollLeft property, horizontal scroll bar slides to the rightmost end): "+gradson.scrollLeft+"<br/>";
data.innerHTML += "<h3>get the browser window location (related to the window size)</h3>";
/*
*IE, Chrome, Safari, and Opera all provide support for window.screenLeft and *window.screenTop, but Firxfox does not support these two properties;
*Firxfox, Chrome, Safari, and Opera all provide support for window.screenX * and window.screenY, but IE does not support these two properties;
*/
var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
data.innerHTML += "on the body page body part (window.screenTop(Y)): "+ topPos+"<br/>";
data.innerHTML += "body web page body text left (window.screenLeft(X)): "+ leftPos+"<br/>";
data.innerHTML += "<h3>get screen resolution</h3>";
data.innerHTML += "High screen resolution (window.screen.height): "+ window.screen.height+"<br/>";
data.innerHTML += "Width of screen resolution (window.screen.width): "+ window.screen.width+"<br/>";
data.innerHTML += "<h3>get the height and width available to the screen</h3>";
data.innerHTML += "High screen resolution (window.screen.availHeight): "+ window.screen.availHeight+"<br/>";
data.innerHTML += "Width of screen resolution (window.screen.availWidth): "+ window.screen.availWidth+"<br/>";
data.innerHTML += "<h3>get the border size of .father</h3>";
data.innerHTML += ".father upper border (clientTop): "+ father.clientTop+"<br/>";
data.innerHTML += ".father left border (clientLeft): "+ father.clientLeft+"<br/>";
data.innerHTML += "<h3> Gets the distance from .son to the boundary of the parent element (that is, the border corresponding to margin + parent element)</h3>";
data.innerHTML += ".son to the upper boundary of the parent element (offsetTop): "+ son.offsetTop+"<br/>";
data.innerHTML += ".son to the left boundary of the parent element (offsetLeft): "+ son.offsetLeft+"<br/>";
}
ps: There are differences in the browser's analysis of the box, so there will be small differences in the data obtained above. A picture attached.
Complete code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css">*{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;}</style><script type="text/javascript">window.onload = function(){/*get element object*/var father = document.getElementById('father');var son = document.getElementById('son');var grandson = document.getElementById('gradson');var data = document.getElementById('data');data.innerHTML = "<h3>Get the window size (related to the window size)</h3>";data.innerHTML += "document.body visible area width: "+document.body.clientWidth+"<br/>";data.innerHTML += "document.body visible area height: "+document.body.clientHeight+"<br/>";data.innerHTML += "window.innerWidth visible area width: "+window.innerWidth+"<br/>";data.innerHTML += "window.innerHeight visible area height: "+window.innerHeight+"<br/>";data.innerHTML += "document.documentElement visible area width: "+document.documentElement.clientWidth+"<br/>";data.innerHTML += "document.documentElement visible area height: "+document.documentElement.clientHeight+"<br/>";data.innerHTML += "<h3>Get the element's own size (not related to whether there is a scroll bar)</h3>";data.innerHTML += ".son's own width (offsetWidth attribute, including left and right borders): "+son.offsetWidth+"<br/>";data.innerHTML += ".son's own height (offsetHeight attribute, including upper and lower borders): "+son.offsetHeight+"<br/>";data.innerHTML += ".son's visible width (clientWidth attribute, not including left and right borders): "+son.clientWidth+"<br/>";data.innerHTML += ".son visible height (clientHeight property, excluding upper and lower borders): "+son.clientHeight+"<br/>";data.innerHTML += "<h3>Get .gradson scroll size and visible size</h3>";data.innerHTML += ".gradson scroll width (scrollWidth property): "+gradson.scrollWidth+"<br/>";data.innerHTML += ".gradson scroll height (scrollHeight property): "+gradson.scrollHeight+"<br/>";data.innerHTML += ".grandson visual width (clientWidth attribute, excluding vertical scroll bars and border): "+grandson.clientWidth+"<br/>";data.innerHTML += ".grandson visual height (clientHeight attribute, excluding horizontal scroll bars and border): "+grandson.clientHeight+"<br/>";data.innerHTML += "<h3>Get the size of .grandson being rolled out (related to the position of the scroll bar)</h3>";data.innerHTML += ".grandson is rolled out high (scrollTop property, vertical scroll bar slides to the bottom): "+grandson.scrollTop+"<br/>";data.innerHTML += ".grandson is rolled out left (scrollLeft property, horizontal scroll bar slides to the right): "+grandson.scrollLeft+"<br/>";data.innerHTML += "<h3> Get the browser window position (related to the window size)</h3>";/**IE, Chrome, Safari, Opera all provide support for window.screenLeft and *window.screenTop, but Firxfox does not support these two properties; *Firxfox, Chrome, Safari, Opera Both provide support for window.screenX * and window.screenY, but IE does not support these two properties; */var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;data.innerHTML += "On the body part of the web page (window.screenTop(Y)): "+ topPos+"<br/>";data.innerHTML += "body web page body text part left (window.screenLeft(X)): "+ leftPos+"<br/>";data.innerHTML += "<h3>Get screen resolution</h3>";data.innerHTML += "High of screen resolution(window.screen.height): "+ window.screen.height+"<br/>";data.innerHTML += "Width of screen resolution(window.screen.width): "+ window.screen.width+"<br/>";data.innerHTML += "<h3>Get screen available height</h3>";data.innerHTML += "The high screen resolution (window.screen.availHeight): "+ window.screen.availHeight+"<br/>";data.innerHTML += "Width of screen resolution (window.screen.availWidth): "+ window.screen.availWidth+"<br/>";data.innerHTML += "<h3>Get the border size of .father</h3>";data.innerHTML += ".father upper border (clientTop): "+ father.clientTop+"<br/>";data.innerHTML += ".father left border (clientLeft): "+ father.clientLeft+"<br/>";data.innerHTML += "<h3>Get the distance from .son to the boundary of the parent element (that is, the border corresponding to margin+parent element)</h3>";data.innerHTML += ".son to the upper boundary of the parent element (offsetTop): "+ son.offsetTop+"<br/>";data.innerHTML += ".son to the left boundary of the parent element (offsetLeft): "+ son.offsetLeft+"<br/>";}</script></head> <body> <div id="father"><h3>This is the parent element, the screen resolution is 1366*768</h3><div id="son"><h3>This is a child element, I wish you a happy National Day</h3><div id="grandson"><h3>This is a grandson element, I wish you a happy National Day</h3><h3>My blog: www.VeVB.COM</h3><h3>Program lover QQ group: </h3><h3>259280570 </h3><h3>Welcome to join</h3><h3>Happy National Day</h3></div></div><div><h3>Data output</h3><div id="data"></div></div></body> </html>