前言
JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找。如果读者有什么好的意见建议,请留言交流,谢谢!
window窗口大小
1.在IE9+、Chrome、Firefox、Opera以及Safari中
window.innerHeight获取浏览器窗口的内部高度 window.innerWidth获取浏览器窗口的内部宽度
var msg = "窗口宽度:" + window .innerHeight + "\n窗口高度:" + window .innerWidth;
alert(msg );
2.在IE5/6/7/8(Chrome和Firefox也支持)
document.documentElement.clientHeight document.documentElement.clientWidth
var msg = "窗口宽度:" + document.documentElement .clientWidth + "\n窗口高度:" + document.documentElement .clientHeight
alert(msg)
var w = window.innerWidth || document.documentElement .clientWidth
var h = window.innerHeight || document.documentElement .clientHeight
alert("窗口宽度:" + w + "\n窗口高度:" + h)
获取内部样式表和外部样式表
1.对IE浏览器:对象.currentStyle[“属性名”] 2.其他浏览器:window.getComputedStyle(对象, null)[“属性名”] 注意:内部样式表中的属性和外部样式表中的属性只能获取不能修改。如果想修改需要通过行间样式表修改,行间样式表的优先级最高,会覆盖内部样式表和外部样式表。 为了简化书写和兼容浏览器,一般封装一个方法。如下列。
<body >
<div id ="box1" > </div >
<script type ="text/javascript" >
var box1 = document.getElementById("box1" );
alert(getStyle(box1, "backgroundColor" ));
function getStyle (obj, attributeName) {
if (obj.currentStyle){
return obj.currentStyle[attributeName];
}else {
return window.getComputedStyle(obj, null )[attributeName];
}
}
</script >
</body >
<script type ="text/javascript" >
window.onscroll = function () {
console.log("开始滚动..." );
console.log(document.documentElement.scrollTop | document.body.scrollTop);
}
</script >
事件对象
box.onclick = function(event ) {
event = event || window .event ;
console.log ("offsetX:" + event .offsetX + " offsetY:" + event .offsetY);
console.log ("screenX:" + event .screenX + " screenY:" + event .screenY);
console.log ("clientX:" + event .clientX + " clientY:" + event .clientY);
console.log ("pageX:" + event .pageX + " pageY: " + event .pageY);
}