JavaScript中获取高度和宽度函数总结_javascript技巧
程序员文章站
2022-04-26 12:08:54
...
html代码:
*
{
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;
}
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 += "
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 += "
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 += "
data.innerHTML += ".father上边框(clientTop):"+ father.clientTop+"
";
data.innerHTML += ".father左边框(clientLeft):"+ father.clientLeft+"
";
data.innerHTML += "
data.innerHTML += ".son到父元素上边界(offsetTop):"+ son.offsetTop+"
";
data.innerHTML += ".son到父元素左边界(offsetLeft):"+ son.offsetLeft+"
";
}
复制代码 代码如下:
这是父元素,屏幕分辨率是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
欢迎你加入
国庆快乐
数据输出
推荐阅读
-
JavaScript中各种编码解码函数的区别和注意事项_javascript技巧
-
js中利用tagname和id获取元素的方法_javascript技巧
-
javascript中获取dom元素的高度和宽度【转】
-
怎样用 JavaScript 准确获取手机屏幕的宽度和高度?
-
用js小类库获取浏览器的高度和宽度信息_javascript技巧
-
JavaScript获取元素尺寸和大小操作总结_javascript技巧
-
js和jquery如何获取图片真实的宽度和高度_javascript技巧
-
js获得页面的高度和宽度的方法_javascript技巧
-
(转载)JavaScript中匿名函数,函数直接量和闭包_javascript技巧
-
用js小类库获取浏览器的高度和宽度信息_javascript技巧