javascript中BOM对象

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>

预览效果

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值