摘要：一什么是瀏覽器兼容問(wèn)題所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。

所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無(wú)論用戶(hù)用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問(wèn)題是我們web前端開(kāi)發(fā)人員經(jīng)常會(huì)碰到和必須要解決的問(wèn)題.

概括的來(lái)說(shuō)，瀏覽器兼容指的是同一份代碼在不同的瀏覽器顯示效果是不同的。
瀏覽器的兼容性大體分為樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個(gè)方面。

一些概念：

Css樣式在各瀏覽器中解析不一致的情況，或者說(shuō)Css樣式在瀏覽器中不能正確顯示的問(wèn)題稱(chēng)為CSS Bug

CSS中，hack是指一種兼容css在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗麄兌紝儆趥€(gè)人對(duì)css代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch（補(bǔ)?。﹣?lái)描述這種行為。

它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，filter是一種用來(lái)過(guò)濾不同瀏覽器的hack類(lèi)型。

那么，

不同的原因是什么？(不支持的屬性? bug？)

如何讓它展示正常?(條件注釋?zhuān)?多帶帶Hack？)

首先，讓我們簡(jiǎn)單了解一下，三種兼容性的不同：

1.因?yàn)闅v史原因，不同的瀏覽器樣式存在差異，可以通過(guò) Normalize.css 抹平差異，也可以定制自己的 reset.css，例如通過(guò)通配符選擇器，全局重置樣式

  { margin: 0; padding: 0; }

2.在CSS3還沒(méi)有成為真正的標(biāo)準(zhǔn)時(shí)，瀏覽器廠商就開(kāi)始支持這些屬性的使用了。CSS3樣式語(yǔ)法還存在波動(dòng)時(shí)，瀏覽器廠商提供了針對(duì)瀏覽器的前綴，直到現(xiàn)在還是有部分的屬性需要加上瀏覽器前綴。在開(kāi)發(fā)過(guò)程中我們一般通過(guò)IDE開(kāi)發(fā)插件、css 預(yù)處理器以及前端自動(dòng)化構(gòu)建工程幫我們處理。

瀏覽器內(nèi)核與前綴的對(duì)應(yīng)關(guān)系如下

3.在還原設(shè)計(jì)稿的時(shí)候我們常常會(huì)需要用到透明屬性，所以解決 IE9 以下瀏覽器不能使用 opacit。

 opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8我們習(xí)慣使用filter濾鏡屬性來(lái)進(jìn)行實(shí)現(xiàn)
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持濾鏡寫(xiě)法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

1.事件兼容的問(wèn)題，我們通常需要會(huì)封裝一個(gè)適配器的方法，過(guò)濾事件句柄綁定、移除、冒泡阻止以及默認(rèn)事件行為處理

 var  helper = {}

 //綁定事件
 helper.on = function(target, type, handler) {
     if(target.addEventListener) {
         target.addEventListener(type, handler, false);
     } else {
         target.attachEvent("on" + type,
             function(event) {
                 return handler.call(target, event);
             }, false);
     }
 };

 //取消事件監(jiān)聽(tīng)
 helper.remove = function(target, type, handler) {
     if(target.removeEventListener) {
         target.removeEventListener(type, handler);
     } else {
         target.detachEvent("on" + type,
         function(event) {
             return handler.call(target, event);
         }, true);
     }
 };

2.new Date()構(gòu)造函數(shù)使用，"2018-07-05"是無(wú)法被各個(gè)瀏覽器中，使用new Date(str)來(lái)正確生成日期對(duì)象的。 正確的用法是"2018/07/05".

3.獲取 scrollTop 通過(guò) document.documentElement.scrollTop 兼容非chrome瀏覽器

 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

解決瀏覽器兼容的主要方法是css hack 那么到底什么是css hack呢？

由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對(duì)CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果。這時(shí)，我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果，就需要針對(duì)不同的瀏覽器或不同版本寫(xiě)特定的CSS樣式，我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫(xiě)相應(yīng)的CSS code的過(guò)程，叫做CSS hack!

1.快速判斷 IE 瀏覽器版本

2.判斷是否是 Safari 瀏覽器

 /* Safari */
 var isSafari = /a/.__proto__=="http://";

3.判斷是否是 Chrome 瀏覽器

 /* Chrome */
 var isChrome = Boolean(window.chrome);

同一產(chǎn)品，版本越老， bug 越多

同一產(chǎn)品，版本越新，功能越多

不同產(chǎn)品，不同標(biāo)準(zhǔn)，不同實(shí)現(xiàn)方式

瀏覽器市場(chǎng)份額

常查CSS屬性是否兼容時(shí)

常查 Hack 的寫(xiě)法

1、要不要做產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）成本的角度 (有無(wú)必要做某件事)

2、做到什么程度讓哪些瀏覽器支持哪些效果

3、如何做根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery的版本)根據(jù)兼容需求選擇兼容工具（htmlshiv.js、respond.js、css reset、normalize.css、modernizr）postcss

4、漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)漸進(jìn)增強(qiáng)(progressive enhancement):
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

1、合適的框架Bootstrap (>=ie8)；jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)；Vue (>= ie9)...

2、條件注釋

即IE條件注釋是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼。條件注釋 (conditional comment) 是于 HTML 源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向 IE 提供及隱藏代碼。條件注釋最初于微軟的 Internet Explorer 5 瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持。微軟已宣布于 IE10 停止支持。

if（如果是）非IE瀏覽器，else（那么）我的頁(yè)面上該 標(biāo)簽會(huì)生效，
彈出一個(gè)1；如果在IE瀏覽器上，這段本身是有效的，即能控制該效果，所以在其他瀏覽器這段則會(huì)被注釋掉。

*3、CSS hack
（1）定義：由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。

這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。

（2）常見(jiàn)hack寫(xiě)法利用該方法去檢測(cè)瀏覽器兼容問(wèn)題

.box{
  color: red;
  _color: blue; /*針對(duì)后期檢查將ie6和其他瀏覽器區(qū)別開(kāi)來(lái)的標(biāo)準(zhǔn)*/
  *color: pink; /*同上，ie6、7*/
  color: yellow9;  /*ie/edge 6-8*/
}

以上屬性均是采用樣式覆蓋形式，去相應(yīng)地在所在瀏覽器屬性生效

（3）常見(jiàn)兼容處理范例

例子A：

.target{
  display: inline-block;
  *display: inline;/*在IE6、7中會(huì)生效，產(chǎn)生類(lèi)似bfc的效果，可添加寬高，
與其他瀏覽器所使用的display: inline-block;有相同效果*/
  *zoom: 1;
}

例子B：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對(duì)ie67有效 */
}

例子C：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對(duì)ie67有效 */
}

例子D：

例子E：

]-->

（4）常見(jiàn)屬性的兼容情況：多使用 https://caniuse.com/

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

圓角: >= ie9

圓角: >= ie9

圓角: >= ie9

常見(jiàn)的瀏覽器兼容性可分為三類(lèi)：

HTML兼容

CSS兼容

JavaScript兼容

viewport

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

方法：可以用html5的oninput事件去代替keyup

input,textarea {
  border: 0;
  -webkit-appearance: none;
}

input:-ms-clear{display:none;}

flex布局對(duì)于低版本的安卓，不支持flex-wrap:wrap屬性，但是ios系統(tǒng)支持換行屬性，這個(gè)時(shí)候如何解決呢？當(dāng)然是不使用換行，用其他方式代替。

.box{
    display: -webkit-box; 
    /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本語(yǔ)法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本語(yǔ)法: IE 10 */
    display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */
    display: flex; /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
}

line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動(dòng)端解決方法

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

$(function () {
    //獲取瀏覽器的userAgent,并轉(zhuǎn)化為小寫(xiě)
    var ua = navigator.userAgent.toLowerCase();
    //判斷是否是蘋(píng)果手機(jī)，是則是true
    var isIos = (ua.indexOf("iphone") != -1) || (ua.indexOf("ipad") != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

這個(gè)不是 BUG，由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻，會(huì)給用戶(hù)帶來(lái)一些困擾或者不必要的流量消耗，所以蘋(píng)果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放，必須由用戶(hù)來(lái)觸發(fā)才可以播放。
解決方法思路：先通過(guò)用戶(hù) touchstart 觸碰，觸發(fā)播放并暫停（音頻開(kāi)始加載，后面用 JS 再操作就沒(méi)問(wèn)題了）。

document.addEventListener("touchstart",function() {
  document.getElementsByTagName("audio")[0].play();
  document.getElementsByTagName("audio")[0].pause();
});

這個(gè)目前沒(méi)有好的辦法解決
情景一：頁(yè)面有視頻，點(diǎn)擊頁(yè)面按鈕顯示彈出層（比如讓用戶(hù)輸入用戶(hù)信息），這時(shí)候視頻會(huì)出現(xiàn)在彈出層上面，是不是很-d疼？
方案：點(diǎn)擊按鈕時(shí)候把video隱藏hide，關(guān)閉彈出層show，過(guò)程中視頻聲音還在
情景二：頁(yè)面很長(zhǎng)，往下翻滾時(shí)，視頻在播放，脫離文檔流
方案：頁(yè)面滾動(dòng)到某一合適位置把video隱藏hide，回滾到某一位置show，過(guò)程中視頻聲音還在

this.value = this.value.replace(/u2006/g,"");

iOS 瀏覽器橫屏?xí)r會(huì)重置字體大小，設(shè)置 text-size-adjust 為 none 可以解決 iOS 上的問(wèn)題，但桌面版 Safari 的字體縮放功能會(huì)失效，因此最佳方案是將 text-size-adjust 為 100% 。

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

原因：瀏覽器興起初期，為了判斷用戶(hù)是雙擊還是單擊，就設(shè)置了一個(gè)時(shí)間段300ms，用戶(hù)單擊后300ms后做事件處理，如果在300ms內(nèi)連續(xù)點(diǎn)擊，就判斷為雙擊，做雙擊處理事件。
所以現(xiàn)在用click綁定事件呢，就會(huì)有300ms延遲的問(wèn)題。
300ms尚可接受，不過(guò)因?yàn)?00ms產(chǎn)生的問(wèn)題，我們必須要解決。300ms導(dǎo)致用戶(hù)體驗(yàn)并不是很好，解決這個(gè)問(wèn)題，我們一般在移動(dòng)端用tap事件來(lái)取代click事件。
推薦兩個(gè)js，一個(gè)是fastclick，一個(gè)是tap.js

解決 ie9 以下瀏覽器對(duì) html5 新增標(biāo)簽不識(shí)別的問(wèn)題
html5shiv.js

解決 ie9 以下瀏覽器不支持 CSS3 Media Query 的問(wèn)題。
respond.js

高版本的瀏覽器用了低版本的瀏覽器無(wú)法識(shí)別的元素，從而導(dǎo)致不能解析。這點(diǎn)主要體現(xiàn)在html5的新標(biāo)簽上

htmlshim框架可以讓低于IE9的瀏覽器支持html5

img的alt屬性，在圖片不存在的情況下，各瀏覽器的解析不一致

在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字

ul標(biāo)簽內(nèi)外邊距問(wèn)題

ul標(biāo)簽在IE6IE7中，有個(gè)默認(rèn)的外邊距，但是在IE8以上及其他瀏覽器中有個(gè)默認(rèn)的內(nèi)邊距

    

    
文字
    
文字
    
文字
    

IE的打印結(jié)果，有3個(gè)子節(jié)點(diǎn)，并且都為P元素；非IE則表現(xiàn)出極大的差異：居然打印出了7個(gè)子節(jié)點(diǎn)，當(dāng)然也包括3個(gè)P元素子節(jié)點(diǎn)在內(nèi)，除此之外還多了4個(gè)nodeType=3的子節(jié)點(diǎn)
改寫(xiě)為：

    
文字
文字
文字

1、圖片間隙

A)div中的圖片間隙(該bug出現(xiàn)在IE6及更低版本中)
描述：在div中插入圖片時(shí)，圖片會(huì)將div下方撐大三像素。
hack1:將

與寫(xiě)在一行上；
hack2:將轉(zhuǎn)為塊狀元素，給添加聲明：display:block;

B)dt,li中圖片間隙（IE6）
hack:添加聲明：display:block;
overflow:hidden;

2、 默認(rèn)高度（IE6）

描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度（低于18px~22px高度）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;

3、雙倍浮向（雙倍邊距）
描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊邊界加倍顯示。
hack:給浮動(dòng)元素添加聲明：display:inline;

4 、 百分比bug
描述：在IE6及以下版本中在解析百分比時(shí)，會(huì)按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況。
hack:給右面的浮動(dòng)元素添加聲明：clear:right; 意思：清除右浮動(dòng)。
clear 清除浮動(dòng)
clear:left;清除左浮動(dòng)
clear:right;清除右浮動(dòng)
clear:both 清除兩邊浮動(dòng)

5、表單元素行高不一致(IE,MOZ,C,O,S)
描述：表單元素行高對(duì)齊方式不一致
hack:給表單元素添加聲明：float:left;

6、按鈕元素默認(rèn)大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack：統(tǒng)一大小
hack2:input外邊套一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽里寫(xiě)按鈕的樣式，把input的邊框 和背景色去掉。
hack3:如果這個(gè)按鈕是一個(gè)圖片，直接把圖片作為按鈕的背景圖即可。
瀏覽器解析按鈕邊框時(shí)，會(huì)把邊框解析在按鈕內(nèi)部，不會(huì)影響按鈕的原有大小

7)透明屬性
IE瀏覽器寫(xiě)法：filter:alpha(opacity=value);
兼容其他瀏覽器寫(xiě)法：opacity:.value;(value的取值范圍0-9)

在IE6及更低版本的瀏覽器里，如果想去掉input的默認(rèn)邊框，需將其border屬性值設(shè)置成0方可兼容多個(gè)瀏覽器。

bug:子元素沒(méi)設(shè)置任何浮動(dòng)，設(shè)置了margin-top屬性后，會(huì)錯(cuò)誤的把margin-top的屬性值添加給父元素.（塊元素）
hack1:給父元素添加overflow:hidden；聲明。
如果父元素設(shè)置了浮動(dòng)屬性也不會(huì)出現(xiàn)這個(gè)問(wèn)題。

在屬性前可加以上這三個(gè)符號(hào)
_ 只有IE6以下支持,例如_height:100px;

只有IE7以下支持,例如*height:100px;

+只有IE7以下支持,例如+height:100px;
針對(duì)IE8加屬性值后綴0（數(shù)字零）,例如：height:200px0;

！important優(yōu)先級(jí)聲明，只有高版本支持，IE6不支持

main{height:60px!important;} 

解決方法：
例如：

 main{height:60px!important;height:70px;} 

注：同時(shí)設(shè)兩個(gè)高度，優(yōu)先級(jí)聲明的屬性要放到前面。

（四）JavaScript 兼容性 1、瀏覽器的寬高問(wèn)題

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?    var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?    //以上為不包括邊框的寬高，如果是offsetWidth或者offsetHeight的話包括邊框

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個(gè)網(wǎng)頁(yè)的寬
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個(gè)網(wǎng)頁(yè)的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//網(wǎng)頁(yè)被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//網(wǎng)頁(yè)左卷的距離

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的寬
var screenX=window.screenLeft;//瀏覽器窗口相對(duì)于屏幕的x坐標(biāo)（除了FireFox）
var screenXX=window.screenX;//FireFox相對(duì)于屏幕的X坐標(biāo)
var screenY=window.screenTop;//瀏覽器窗口相對(duì)于屏幕的y坐標(biāo)（除了FireFox）
var screenYY=window.screenY;//FireFox相對(duì)于屏幕的y坐標(biāo)

2、event事件問(wèn)題

/event事件問(wèn)題
    document.onclick=function(ev){//谷歌火狐的寫(xiě)法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容寫(xiě)法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠標(biāo)X軸的坐標(biāo)
        var mouseY=e.clientY;//鼠標(biāo)Y軸的坐標(biāo)
    }

3、DOM節(jié)點(diǎn)相關(guān)的問(wèn)題

 function nextnode(obj){//獲取下一個(gè)兄弟節(jié)點(diǎn)
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//獲取上一個(gè)兄弟節(jié)點(diǎn)
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//獲取第一個(gè)子節(jié)點(diǎn)
        if (obj.firstElementChild) {
            return obj.firstElementChild;//非IE678支持
        } else{
            return obj.firstChild;//IE678支持
        };
    }
    function lastnode(obj){//獲取最后一個(gè)子節(jié)點(diǎn)
        if (obj.lastElementChild) {
            return obj.lastElementChild;//非IE678支持
        } else{
            return obj.lastChild;//IE678支持
        };
    }

4、document.getElementsByClassName問(wèn)題

//通過(guò)類(lèi)名獲取元素
    document.getElementsByClassName("");//IE 6 7 8不支持；

    //這里可以定義一個(gè)函數(shù)來(lái)解決兼容問(wèn)題，當(dāng)然別在這給我提jQuery...
    //第一個(gè)為全局獲取類(lèi)名，第二個(gè)為局部獲取類(lèi)名
    function byClass1(oClass){//全局獲取，oClass為你想要查找的類(lèi)名，沒(méi)有“.”
        var tags=document.all?document.all:document.getElementsByTagName("*");
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
            var reg=new RegExp(""+oClass+"","g");
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是數(shù)組，包含你傳入的class所有元素；
    }

    function byClass2(parentID,oClass){//局部獲取類(lèi)名，parentID為你傳入的父級(jí)ID
        var parent=document.getElementById(parentID);
        var tags=parent.all?parent.all:parent.getElementsByTagName("*");
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp(""+oClass+"","g");
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是數(shù)組，包含你傳入的class所有元素；
     }

5、獲取元素的非行間樣式值

//獲取元素的非行間樣式值
     function getStyle(object,oCss) {
             if (object.currentStyle) {
                 return object.currentStyle[oCss];//IE
             }else{
                 return getComputedStyle(object,null)[oCss];//除了IE
             }
     }

6、設(shè)置監(jiān)聽(tīng)事件

 function addEvent(obj,type,fn){//添加事件監(jiān)聽(tīng)，三個(gè)參數(shù)分別為 對(duì)象、事件類(lèi)型、事件處理函數(shù)，默認(rèn)為false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent("on"+type,fn);//ie,這里已經(jīng)加上on，傳參的時(shí)候注意不要重復(fù)加了
        };
    }
    function removeEvent(obj,type,fn){//刪除事件監(jiān)聽(tīng)
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent("on"+type,fn);//ie，這里已經(jīng)加上on，傳參的時(shí)候注意不要重復(fù)加了
        };
    }

7、元素到瀏覽器邊緣的距離

 function offsetTL(obj){//獲取元素內(nèi)容距離瀏覽器邊框的距離（含邊框）
        var ofL=0,ofT=0;
        while(obj){
            ofL+=obj.offsetLeft+obj.clientLeft;
            ofT+=obj.offsetTop+obj.clientTop;
            obj=obj.offsetParent;
        }
        return{left:ofL,top:ofT};
    }

8、阻止默認(rèn)事件

//js阻止默認(rèn)事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C標(biāo)準(zhǔn)
        }else{
            e.returnValue="false";//IE..
        }
    }

9、關(guān)于EVENT事件中的target

//關(guān)于event事件中的target
    document.onmouseover=function(e){
        var e=e||window.event;
        var Target=e.target||e.srcElement;//獲取target的兼容寫(xiě)法，后面的為IE
        var from=e.relatedTarget||e.formElement;//鼠標(biāo)來(lái)的地方，同樣后面的為IE...
        var to=e.relatedTarget||e.toElement;//鼠標(biāo)去的地方
    }

10、鼠標(biāo)滾輪滾動(dòng)事件

//鼠標(biāo)滾輪事件
    //火狐中的滾輪事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滾的話為 -3，后滾的話為 3
    },false)
    //非火狐中的滾輪事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滾：120，后滾：-120
    }

完結(jié)

• 上一篇：從底層看JS執(zhí)行機(jī)制
• 下一篇：重復(fù)操作算法（JavaScript）