首頁  >  文章  >  web前端  >  一段非常簡單的js判斷瀏覽器的核心_javascript技巧

一段非常簡單的js判斷瀏覽器的核心_javascript技巧

WBOY
WBOY原創
2016-05-16 16:39:311242瀏覽

  大家應該還記得JavaScript行內樣式怎麼寫吧? (看來我是廢話了!)

  在前端開發過程中,有時我們需要判斷瀏覽器的核心前綴,對不同的瀏覽器做出不同的處理,因此我們可以這麼做。

  alert(element.style.webkitTransition); 這個是取得以webkit為前綴的transition值。但如果不是webkit為前綴的瀏覽器,則會傳回undefined。而我們可以將所有的核心前綴給枚舉出來,然後取得其某個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) {
    // 此处进行判断是否有对应的内核前缀
    if (typeof style[vendor[i] + 'Transition'] === 'string') {
      return vendor[i];
    }
    i++;
  }
}

  接著只需要呼叫getVendorPrefix()即可知道瀏覽器的核心前綴,如果傳回undefined則證明瀏覽器不支援CSS3屬性,即沒有核心前綴。

  大家應該知道,我們在寫程式碼的過程中,能寫CSS就不寫JavaScritp,畢竟CSS的效能會比自己寫JS的高一些,因此,我們在開發一些實際應該中,會用到transition ,例如一個簡單的圖片輪播,我們可以使用CSS3的transition,也可以使用jQuery的animate或自己寫原生,但CSS3的效能肯定會高一些,因此我們可以寫兩套程式碼,對於支援CSS3的瀏覽器則使用animation,而不支援的則使用計時器或animate。這樣的話能夠獲得更好的使用者體驗。

  以上是看jquery.slides.js的插件心得,如有更好的方法,請一定告知筆者。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn