談?wù)凧avaScript中瀏覽器兼容問題的寫法小議

更新時(shí)間：2016年12月17日 16:20:01 作者：策碼揚(yáng)鞭

本篇文章主要介紹了JavaScript中瀏覽器兼容問題的寫法小議，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

前言

JavaScript中很多坑，其中對(duì)瀏覽器的兼容也是一個(gè)問題，本文就簡略的歸納了部分針對(duì)瀏覽器兼容問題的寫法的例子，旨在便于查找。如果讀者有什么好的意見建議，請(qǐng)留言交流，謝謝！

window窗口大小

1.在IE9+、Chrome、Firefox、Opera以及Safari中

window.innerHeight獲取瀏覽器窗口的內(nèi)部高度

window.innerWidth獲取瀏覽器窗口的內(nèi)部寬度

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);

獲取內(nèi)部樣式表和外部樣式表

1.對(duì)IE瀏覽器：對(duì)象.currentStyle[“屬性名”]

2.其他瀏覽器：window.getComputedStyle(對(duì)象， null)[“屬性名”]

注意：內(nèi)部樣式表中的屬性和外部樣式表中的屬性只能獲取不能修改。如果想修改需要通過行間樣式表修改，行間樣式表的優(yōu)先級(jí)最高，會(huì)覆蓋內(nèi)部樣式表和外部樣式表。

為了簡化書寫和兼容瀏覽器，一般封裝一個(gè)方法。如下列。

<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"));
    /*
      為了簡化書寫和兼容瀏覽器，一般封裝一個(gè)方法出來
    */
    function getStyle (obj, attributeName) {  
      if(obj.currentStyle){  //如果存在對(duì)象，則是在ie瀏覽器
        return obj.currentStyle[attributeName];
      }else { //其他瀏覽器
        return window.getComputedStyle(obj, null)[attributeName];
      }
    }
  </script>
</body>

onscroll事件

<script type="text/javascript">
   window.onscroll = function () {
    console.log("開始滾動(dòng)...");
    //跨瀏覽器獲得滾動(dòng)的距離
    console.log(document.documentElement.scrollTop | document.body.scrollTop);
  }
</script>

事件對(duì)象

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);
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: