The effects are as follows:
The code is as follows:
<html><head><title>Get the current object size and screen resolution, etc.</title><body><div style="width:88%;margin:30px auto; color:blue;" id="div_html"></div><script type="text/javascript">var s = ""; s += " Web page visible area width: "+ document.body.clientWidth+"<br />"; s += " Web page visible area height: "+ document.body.clientHeight+"<br />"; s += " Web page visible area width: "+ document.body.offsetWidth+"<br />"; s += " Web page visible area width: "+ document.body.offsetWidth+" (Including the width of edges and scrollbars)"+"<br />"; s += " The visible area height of the web page: "+ document.body.offsetHeight + " (Including the width of edges)"+"<br />"; s += " The full text width of the web page: "+ document.body.scrollWidth+"<br />"; s += " The full text height of the web page: "+ document.body.scrollHeight+"<br />"; s += " The height of the web page being rolled out: "+ document.body.scrollTop+"<br />"; s += " The height of the web page being rolled out: "+ document.documentElement.scrollTop+"<br />"; s += " The height of the web page being rolled out: "+ document.documentElement.scrollTop+"<br />"; s += " The height of the web page being rolled out: "+ document.documentElement.scrollTop+"<br />"; s += " The height of the web page being rolled out: "+ document.documentElement.scrollTop+"<br />"; s += " The height of the web page being rolled out: "+ document.documentElement.scrollTop+"<br />" />"; s += " The left side of the web page being rolled out: "+ document.body.scrollLeft+"<br />"; s += " On the web page body part: "+ window.screenTop+"<br />"; s += " The left side of the web page body part: "+ window.screenLeft+"<br />"; s += " The height of the screen resolution: "+ window.screen.height+"<br />"; s += " The width of the screen resolution: "+ window.screen.width+"<br />"; s += " The height of the screen available workspace: "+ window.screen.availHeight+"<br />"; s += " The width of the screen available workspace: "+ window.screen.availWidth+"<br />"; s += "Your screen settings are "+ window.screen.colorDepth +" bit color"+"<br />"; s += "Your screen settings"+ window.screen.deviceXDPI +" pixel/inch"+"<br />"; document.getElementById("div_html").innerHTML = s;</script></body></html>The code description diagram is as follows: