html代码：
复制代码 代码如下:
这是父元素，屏幕分辨率是1366*768
这是子元素，祝大家国庆快乐
这是孙子元素，祝大家国庆快乐
                 我的博客:www.jb51.net
                 程序爱好者qq群:
                 259280570 
                 欢迎你加入
                 国庆快乐
数据输出
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 = 获取视窗大小(跟窗口大小有关);
         data.innerhtml += document.body可见区域宽: +document.body.clientwidth+
;
         data.innerhtml += document.body可见区域高: +document.body.clientheight+
;
         data.innerhtml += window.innerwidth可见区域宽: +window.innerwidth+
;
         data.innerhtml += window.innerheight可见区域高: +window.innerheight+
;
         data.innerhtml += document.documentelement可见区域宽: +document.documentelement.clientwidth+
;
         data.innerhtml += document.documentelement可见区域高: +document.documentelement.clientheight+
;
         data.innerhtml += 获取元素自身大小(跟是否有滚动条无关);
         data.innerhtml += .son自身宽度(offsetwidth属性，包括左右边框)：+son.offsetwidth+
;
         data.innerhtml += .son自身高度(offsetheight属性，包括上下边框)：+son.offsetheight+
;
         data.innerhtml += .son可视宽度(clientwidth属性，不包括左右边框)：+son.clientwidth+
;
         data.innerhtml += .son可视高度(clientheight属性，不包括上下边框)：+son.clientheight+
;
         data.innerhtml += 获取.grandson滚动大小和可视大小;
         data.innerhtml += .grandson滚动宽度(scrollwidth属性)：+grandson.scrollwidth+
;
         data.innerhtml += .grandson滚动高度(scrollheight属性)：+grandson.scrollheight+
;
         data.innerhtml += .grandson可视宽度(clientwidth属性，不包括竖直滚动条和border)：+grandson.clientwidth+
;
         data.innerhtml += .grandson可视高度(clientheight属性，不包括水平滚动条和border)：+grandson.clientheight+
;
         data.innerhtml += 获取.grandson被卷去的大小(跟滚动条的位置有关);
         data.innerhtml += .grandson被卷去的高(scrolltop属性，竖直滚动条滑到最底端)：+grandson.scrolltop+
;
         data.innerhtml += .grandson被卷去的左(scrollleft属性，水平滚动条滑到最右端)：+grandson.scrollleft+
;
         data.innerhtml += 获取浏览器窗口位置(跟窗口大小有关);
         /*
         *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+
;
         data.innerhtml += body网页正文部分左(window.screenleft(x))：+ leftpos+
;
         data.innerhtml += 获取屏幕分辨率;
         data.innerhtml += 屏幕分辨率的高(window.screen.height)：+ window.screen.height+
;
         data.innerhtml += 屏幕分辨率的宽(window.screen.width)：+ window.screen.width+
;
         data.innerhtml += 获取屏幕可用的高宽;
         data.innerhtml += 屏幕分辨率的高(window.screen.availheight)：+ window.screen.availheight+
;
         data.innerhtml += 屏幕分辨率的宽(window.screen.availwidth)：+ window.screen.availwidth+
;
         data.innerhtml += 获取.father的边框大小;
         data.innerhtml += .father上边框(clienttop)：+ father.clienttop+
;
         data.innerhtml += .father左边框(clientleft)：+ father.clientleft+
;
         data.innerhtml += 获取.son到父元素边界的距离(即对应margin+父元素对应的border);
         data.innerhtml += .son到父元素上边界(offsettop)：+ son.offsettop+
;
         data.innerhtml += .son到父元素左边界(offsetleft)：+ son.offsetleft+
;
     }
ps：浏览器对盒子的解析存在差异，所以以上得出的数据也会存在小小差异。附图一张。
完整代码：
test 这是父元素，屏幕分辨率是1366*768 这是子元素，祝大家国庆快乐 这是孙子元素，祝大家国庆快乐 我的博客:www.jb51.net 程序爱好者qq群: 259280570 欢迎你加入 国庆快乐
数据输出