前言
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);}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
