浏览器窗口高度和宽度和document的一些属性
摘自与:http://www.jb51.net/article/32679.htm
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。
IE中,浏览器显示窗口大小只能以下获取:
document.body.offsetWidth
document.body.offsetHeight
在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:
document.documentElement.clientWidth
document.documentElement.clientHeight
IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;
同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取:
window.innerWidth
window.innerHeight
整个网页尺寸一般获得方法 代码如下:
document.body.scrollWidth
document.body.scrollHeight
屏幕分辨率高度一般获得方法 代码如下:
window.screen.height
window.screen.width
总结一下实例
function getViewSizeWithoutScrollbar(){//不包含滚动条
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//包含滚动条
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}
}else{
return {
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
}
}
}
document的一些属性方法。
<style>
body{height: 1200px;}
#box{width:100px;height:100px;background-color: red;position:absolute;left: 300px;top: 400px;}
</style>
<div id='box'></div>
<script>
//获取所有的元素
console.dir(document.all);
console.dir(document.getElementsByTagName('*'));
//获取文档的标题
console.log(document.title);
//获取body对象
console.dir(document.body);
//获取文档对象
console.dir(document.documentElement);
//获取当前页面的渲染方式
console.log(document.compatMode);
//获取描述元素的位置、大小的一个对象,DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
console.dir(box.getBoundingClientRect());
document.body.onscroll=function(){
//获取滚动条的大小
console.log(document.documentElement.scrollTop,
document.documentElement.scrollLeft);
}
</script>