在某网课学习前端笔记整理js篇27-浏览器窗口高度和宽度和document的一些属性

浏览器窗口高度和宽度和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>