document.compatMode

document.compatMode 是用来判断当前浏览器采用的渲染方式。

官方解释:

BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。

1、当 document.compatMode 等于 BackCompat 时,浏览器客户区宽度是 document.body.clientWidth;

2、当 document.compatMode 等于 CSS1Compat 时,浏览器客户区宽度是 document.documentElement.clientWidth。

3、浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

demo(){
    var cWidth,cHeight,sWidth,sHeight,sLeft,sTop;
	if (document.compatMode == "BackCompat") {
	    cWidth = document.body.clientWidth;
		cHeight = document.body.clientHeight;
		sWidth = document.body.scrollWidth;
	    sHeight = document.body.scrollHeight;
		sLeft = document.body.scrollLeft;
		sTop = document.body.scrollTop;
	}else { //document.compatMode == "CSS1Compat"
		cWidth = document.documentElement.clientWidth;
		cHeight = document.documentElement.clientHeight;
		sWidth = document.documentElement.scrollWidth;
		sHeight = document.documentElement.scrollHeight;
		sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft :            document.documentElement.scrollLeft;
		sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
	}
}

(以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逸曦穆泽

您的鼓励是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值