html代碼:
複製代碼代碼如下:
<body>
<div id="father">
<h3>這是父元素,屏幕分辨率是1366*768</h3>
<div id="son">
<h3>這是子元素,祝大家國慶快樂</h3>
<div id="grandson">
<h3>這是孫子元素,祝大家國慶快樂</h3>
<h3>我的博客:www.VeVB.COm</h3>
<h3>程序愛好者QQ群:</h3>
<h3>259280570 </h3>
<h3>歡迎你加入</h3>
<h3>國慶快樂</h3>
</div>
</div>
</div>
<div>
<h3>數據輸出</h3>
<div id="data"></div>
</div>
</body>
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;
}
js:
複製代碼代碼如下:
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/>";
}
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 id="father"><h3>這是父元素,屏幕分辨率是1366*768</h3><div id="son"><h3>這是子元素,祝大家國慶快樂</h3><div id="grandson"><h3>這是孫子元素,祝大家國慶快樂</h3><h3>我的博客:www.VeVB.COm</h3><h3>程序愛好者QQ群:</h3><h3>259280570 </h3><h3>歡迎你加入</h3><h3>國慶快樂</h3></div></div></div><div><h3>數據輸出</h3><div id="data"></div></div></body> </html>