快捷導(dǎo)航

一段非常簡(jiǎn)單的js判斷瀏覽器的內(nèi)核

更新時(shí)間：2014年08月17日 16:29:51 投稿：hebedich

先說(shuō)明，此處的方法是說(shuō)超級(jí)簡(jiǎn)單的方法，不是指代碼超級(jí)少，而是用非常簡(jiǎn)單的知識(shí)點(diǎn)，只要懂得怎么寫(xiě)JavaScript的行內(nèi)樣式就可以判斷。

　　大家應(yīng)該還記得JavaScript行內(nèi)樣式怎么寫(xiě)吧？（看來(lái)我是廢話(huà)了?。?/p>

　　在前端開(kāi)發(fā)過(guò)程中，有時(shí)我們需要判斷瀏覽器的內(nèi)核前綴，對(duì)不同的瀏覽器做出不同的處理，因此我們可以這么做。

　　alert(element.style.webkitTransition); 這個(gè)是獲取以webkit為前綴的transition值。但如果不是webkit為前綴的瀏覽器，則會(huì)返回undefined。而我們可以將所有的內(nèi)核前綴給枚舉出來(lái)，然后獲取其某個(gè)CSS的值，即可做出判斷。代碼如下：

function getVendorPrefix() {
  // 使用body是為了避免在還需要傳入元素
  var body = document.body || document.documentElement,
    style = body.style,
    vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
    i = 0;

  while (i < vendor.length) {
    // 此處進(jìn)行判斷是否有對(duì)應(yīng)的內(nèi)核前綴
    if (typeof style[vendor[i] + 'Transition'] === 'string') {
      return vendor[i];
    }
    i++;
  }
}

　　然后只需要調(diào)用getVendorPrefix()即可知道瀏覽器的內(nèi)核前綴，如果返回undefined則證明瀏覽器不支持CSS3屬性，即沒(méi)有內(nèi)核前綴。

　　大家應(yīng)該知道，我們?cè)趯?xiě)代碼的過(guò)程中，能寫(xiě)CSS就不寫(xiě)JavaScritp，畢竟CSS的性能會(huì)比自己寫(xiě)JS的高一些，因此，我們?cè)陂_(kāi)發(fā)一些實(shí)際應(yīng)該中，會(huì)用到transition，比如一個(gè)簡(jiǎn)單的圖片輪播，我們可以使用CSS3的transition，也可以使用jQuery的animate或自己寫(xiě)原生，但CSS3的性能肯定會(huì)高一些，因此我們可以寫(xiě)兩套代碼，對(duì)于支持CSS3的瀏覽器則使用animation，而不支持的則使用計(jì)時(shí)器或animate。這樣的話(huà)能夠獲取更好的用戶(hù)體驗(yàn)。

　　以上是看jquery.slides.js的插件心得，如有更好的方法，請(qǐng)一定告知筆者。

您可能感興趣的文章:

相關(guān)文章

javascript讀取本地文件和目錄方法詳解
這篇文章主要介紹了javascript讀取本地文件和目錄方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
JavaScript中Array對(duì)象用法實(shí)例總結(jié)
這篇文章主要介紹了JavaScript中Array對(duì)象用法,結(jié)合實(shí)例形式總結(jié)分析了Array數(shù)組對(duì)象的常用屬性與方法的功能與相關(guān)使用技巧,需要的朋友可以參考下
2016-11-11
html頁(yè)面顯示年月日時(shí)分秒和星期幾的兩種方式
在html頁(yè)面中顯示時(shí)間是很常見(jiàn)的，實(shí)現(xiàn)的方法有很多，下面為大家簡(jiǎn)單介紹兩種方式，有需求的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
jquery ajax應(yīng)用中iframe自適應(yīng)高度問(wèn)題解決方法
很多管理系統(tǒng)中，都使用iframe進(jìn)行信息內(nèi)容的展示方式，或者作為主菜單的鏈接展示內(nèi)容。使用iframe的問(wèn)題就是自適應(yīng)高度的問(wèn)題
2014-04-04
JS中null和undefined的區(qū)別
在JavaScript中，null和undefined是兩個(gè)常見(jiàn)的數(shù)據(jù)類(lèi)型，本文就詳細(xì)的介紹了JS中null和undefined的區(qū)別，感興趣的可以了解一下
2023-05-05
JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（二）生成調(diào)試安裝包
這篇文章主要介紹了JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（二）生成調(diào)試安裝包的相關(guān)資料,需要的朋友可以參考下
2015-12-12
openlayers實(shí)現(xiàn)地圖彈窗
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
利用JS實(shí)現(xiàn)一個(gè)同Excel表現(xiàn)的智能填充算法
這篇文章主要給大家介紹了關(guān)于利用JS實(shí)現(xiàn)一個(gè)同Excel表現(xiàn)的智能填充算法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-08-08
bootstrapValidator 重新啟用提交按鈕的方法
bootstrapValidator 使用中，由于字段檢查等原因，致使提交按鈕失效。如何重新啟用提交按鈕呢？下面小編給大家介紹下bootstrapValidator 重新啟用提交按鈕的方法,需要的朋友可以參考下
2017-02-02
純js和css實(shí)現(xiàn)漸變色包括靜態(tài)漸變和動(dòng)態(tài)漸變
用javascript實(shí)現(xiàn)一下所謂的動(dòng)態(tài)漸變，考慮動(dòng)態(tài)原因就不上圖了，我來(lái)簡(jiǎn)單介紹下思路
2014-05-05