window对象:Window 对象表示浏览器中打开的窗口。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
<h1 id="txt">沙</h1>
<script>
// 全局变量
// 全局变量 是 window 对象的属性
var a = 38;
console.log(window);
// 全局函数
// 全局函数是window对象的方法
window.document.querySelector('#txt')
</script>
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
-
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
-
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5:
-
document.documentElement.clientHeight
-
document.documentElement.clientWidth
或者
-
document.body.clientHeight
-
document.body.clientWidth
注意:
document.body.clientHeight不能正确取到浏览器页面高度 ,原因是:
XHTML中用 document.documentElement.clientHeight 代替 document.body.clientHeight
<script>
// 获取浏览器可视区域的宽度和高度
// onresize 事件---当浏览器窗口大小变化的时候,会触发这个事件
window.onresize = function(){
// 获取浏览器可视区域的宽度和高度
// var cw = document.documentElement.clientWidth;
// var ch = document.documentElement.clientHeight;
// document.title = cw + '|' + ch;
var iw = window.innerWidth;
var ih = window.innerHeight;
document.title = iw + '|' +ih;
// 第三种方法 不推荐使用
// var cW = document.body.clientWidth;
// var cH = document.body.clientHeight;//var cH = document.body.clientHeight;不能正确取到浏览器页面高度
// document.title = cW + '|' + cH;
}
</script>
预览效果