谈谈JavaScript中浏览器兼容问题的写法小议
#代码知识 发布时间： 2026-01-11
前言
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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
代码知识SEO上一篇 : Android 关于ExpandableListView刷新问题的解决方法
下一篇 : Bootstrap CSS组件之按钮组(btn-group)
-
SEO外包最佳选择国内专业的白帽SEO机构，熟知搜索算法，各行业企业站优化策略！
SEO公司
-
可定制SEO优化套餐基于整站优化与品牌搜索展现，定制个性化营销推广方案！
SEO套餐
-
SEO入门教程多年积累SEO实战案例，从新手到专家，从入门到精通，海量的SEO学习资料！
SEO教程
-
SEO项目资源高质量SEO项目资源，稀缺性外链，优质文案代写，老域名提权，云主机相关配置折扣！
SEO资源
-
SEO快速建站快速搭建符合搜索引擎友好的企业网站，协助备案，域名选择，服务器配置等相关服务！
SEO建站
-
快速搜索引擎优化建议没有任何SEO机构，可以承诺搜索引擎排名的具体位置，如果有，那么请您多注意！专业的SEO机构，一般情况下只能确保目标关键词进入到首页或者前几页，如果您有相关问题，欢迎咨询！
