html代碼：
css：
js:
ps：瀏覽器對盒子的解析存在差異，所以以上得出的數據也會存在小小差異。附圖一張。
完整代碼：
<!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() { /*獲取元素對象*/ var father = document.getElementById('father'); var son = document.getElementById('son'); var grandson = document.getElementById('grandson'); var data = document.getElementById('data'); data.innerHTML = "<h3>獲取視窗大小(跟窗口大小有關)</h3>"; data.innerHTML += "document.body可見區域寬: "+document.body.clientWidth+"<br/>"; data.innerHTML += "document.body可見區域高: "+document.body.clientHeight+"<br/>"; data.innerHTML += "window.innerWidth可見區域寬: "+window.innerWidth+"<br/>"; data.innerHTML += "window.innerHeight可見區域高: "+window.innerHeight+"<br/>"; data.innerHTML += "document.documentElement可見區域寬: "+document.documentElement.clientWidth+"<br/>"; data.innerHTML += "document.documentElement可見區域高: "+document.documentElement.clientHeight+"<br/>"; data.innerHTML += "<h3>獲取元素自身大小(跟是否有滾動條無關)</h3>"; data.innerHTML += ".son自身寬度(offsetWidth屬性，包括左右邊框)："+son.offsetWidth+"<br/>"; data.innerHTML += ".son自身高度(offsetHeight屬性，包括上下邊框)："+son.offsetHeight+"<br/>"; data.innerHTML += ".son可視寬度(clientWidth屬性，不包括左右邊框)："+son.clientWidth+"<br/>"; data.innerHTML += ".son可視高度(clientHeight屬性，不包括上下邊框)："+son.clientHeight+"<br/>"; data.innerHTML += "<h3>獲取.grandson滾動大小和可視大小</h3>"; data.innerHTML += ".grandson滾動寬度(scrollWidth屬性)："+grandson.scrollWidth+"<br/>"; data.innerHTML += ".grandson滾動高度(scrollHeight屬性)："+grandson.scrollHeight+"<br/>"; data.innerHTML += ".grandson可視寬度(clientWidth屬性，不包括豎直滾動條和border)："+grandson.clientWidth+"<br/>"; data.innerHTML += ".grandson可視高度(clientHeight屬性，不包括水平滾動條和border)："+grandson.clientHeight+"<br/>"; data.innerHTML += "<h3>獲取.grandson被卷去的大小(跟滾動條的位置有關)</h3>"; data.innerHTML += ".grandson被卷去的高(scrollTop屬性，豎直滾動條滑到最底端)："+grandson.scrollTop+"<br/>"; data.innerHTML += ".grandson被卷去的左(scrollLeft屬性，水平滾動條滑到最右端)："+grandson.scrollLeft+"<br/>"; data.innerHTML += "<h3>獲取瀏覽器窗口位置(跟窗口大小有關)</h3>"; /* *IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持這個兩個屬性； *Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持這個兩個屬性； */ var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX; var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY; data.innerHTML += "body網頁正文部分上(window.screenTop(Y))："+ topPos+"<br/>"; data.innerHTML += "body網頁正文部分左(window.screenLeft(X))："+ leftPos+"<br/>"; data.innerHTML += "<h3>獲取屏幕分辨率</h3>"; data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"<br/>"; data.innerHTML += "屏幕分辨率的寬(window.screen.width)："+ window.screen.width+"<br/>"; data.innerHTML += "<h3>獲取屏幕可用的高寬</h3>"; data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"<br/>"; data.innerHTML += "屏幕分辨率的寬(window.screen.availWidth)："+ window.screen.availWidth+"<br/>"; data.innerHTML += "<h3>獲取.father的邊框大小</h3>"; data.innerHTML += ".father上邊框(clientTop)："+ father.clientTop+"<br/>"; data.innerHTML += ".father左邊框(clientLeft)："+ father.clientLeft+"<br/>"; data.innerHTML += "<h3>獲取.son到父元素邊界的距離(即對應margin+父元素對應的border)</h3>"; data.innerHTML += ".son到父元素上邊界(offsetTop)："+ son.offsetTop+"<br/>"; data.innerHTML += ".son到父元素左邊界(offsetLeft)："+ son.offsetLeft+"<br/>"; }</script></head> <body> <div class="father" id="father"> <h3>這是父元素，屏幕分辨率是1366*768</h3> <div class="son" id="son"> <h3>這是子元素，祝大家國慶快樂 </h3> <div class="grandson" id="grandson"> <h3>這是孫子元素，祝大家國慶快樂 </h3> <h3>我的博客:m.survivalescaperooms.com</h3> <h3>程序愛好者QQ群:</h3> <h3>259280570 </h3> <h3>歡迎你加入 </h3> <h3>國慶快樂 </h3> </div> </div> </div> <div class="data"> <h3>數據輸出</h3> <div id="data"></div> </div></body> </html> 新聞熱點
疑難解答
