谈谈JavaScript中浏览器兼容问题的写法小议
程序员文章站
2023-10-24 20:50:34
前言
javascript中很多坑，其中对浏览器的兼容也是一个问题，本文就简略的归纳了部分针对浏览器兼容问题的写法的例子，旨在便于查找。如果读者有什么好的意见建议，请留言...
前言
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);
3.兼容写法（可以涵盖所有的浏览器）
就是把前两者的写法相 “或”。
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(box1.currentstyle["width"]); //只支持ie浏览器
// alert(window.getcomputedstyle(box1, null)["height"]); //支持浏览器外的其他浏览器
alert(getstyle(box1, "backgroundcolor"));
/*
为了简化书写和兼容浏览器，一般封装一个方法出来
*/
function getstyle (obj, attributename) {
if(obj.currentstyle){ //如果存在对象，则是在ie浏览器
return obj.currentstyle[attributename];
}else { //其他浏览器
return window.getcomputedstyle(obj, null)[attributename];
}
}
</script>
</body>
onscroll事件
<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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： JS瀑布流实现方法实例分析