JavaScript中的宽度和高度
程序员文章站
2022-03-10 17:15:32
...
关于winow和document的关系:
window是一个顶层对象,即浏览器的窗口
document表示当前的HTML文档,也是一个对象,而document对象也是window对象的一部分
注意:以下测试均在Firefox
window相关的宽度和高度
innerHeight与outerHeight
通过Firebug的测试,我得到以下特点:
- window.outerHeight与浏览器的窗口的高度有关系
- window.innerHeight与浏览器的窗口的高度和控制台的高度都有关系
innerWidth与outerWidth
>window.outerWidth
1936
>window.innerWidth
1920
所以关系大致如下:
window.screen
window.screen 对象包含有关用户屏幕的信息
- window.screen.availWidth 返回当前屏幕宽度(空白空间)
- window.screen.availHeight 返回当前屏幕高度(空白空间)
- window.screen.width 返回当前屏幕宽度(分辨率值)
- window.screen.height 返回当前屏幕高度(分辨率值)
- window.screenX 当前窗口距离屏幕左边的距离
- window.screenY 当前窗口距离屏幕上边的距离
测试的图片如下:
> window.screen.availWidth
1366
> window.innerWidth
654> window.screen.height
768
> window.screen.availHeight
728
document相关的宽度和高度
1.client相关的宽高
- document.body.clientWidth 文档的可视部分的宽度(clientWidth=width+padding 不包括滚动条)
- document.body.clientHeight 文档的可视部分的高度(clientHeight=height+padding 不包括滚动条)
- document.body.clientLeft 获取body元素对象的左边框的宽度(与border有关系)
- document.body.clientTop 获取body元素对象的上边框的宽度(与border有关系)
<style type="text/css">
body {
width: 300px;
height: 400px;
background-color: #666;
}
</style>
<script type="text/javascript">
window.onload = function() {
console.log(document.body.clientWidth, document.body.clientHeight);
}
</script>
上面的代码输出的就是300, 400
2.与offset相关的宽高
- document.body.offsetWidth 获取body元素对象的宽度,即offsetWidth=width+padding+border,也可以写成offsetWidth=clientWidth+border
- document.body.offsetHeight 获取body元素对象的高度,即offsetHeight=height+padding+border,也可以写成offsetHeight=clientHeight+border
- document.body.offsetTop 获取body元素对象相对于自身的位置,举个例子,当body设置了1px的边距时,此时的document.body.offsetTop 值为 -1
- document.body.offsetLeft 获取body元素对象相对于自身的位置,当body设置了1px的边距时,此时的document.body.offsetLeft 值为 -1
3.与scroll相关的宽高
- document.body.scrollWidth 获取body元素对象内容的实际宽度,即对象的滚动宽度
- document.body.scrollHeight 获取body元素对象内容的实际高度,即对象的滚动高度
- document.body.scrollLeft 获取页面文档向右滚动过的像素数
- document.body.scrollTop 获取页面文档向下滚动过的像素数
上一篇: log4j的使用
下一篇: Mybatis入门(三)之取别名标签
推荐阅读