js 获取father_JavaScript中获取高度和宽度函数总结_javascript技巧

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

欢迎你加入

国庆快乐

数据输出

本文原创发布php中文网，转载请注明出处，感谢您的尊重！