js判斷瀏覽器的內核和是否支持某些CSS3屬性

一、判斷瀏覽器內核

在前端開發過程中,有時我們需要判斷瀏覽器的內核前綴,對不同的瀏覽器做出不同的處理,因此我們可以這么做。
  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;
console.log(style);
        while (i < vendor.length) {
            // 此處進行判斷是否有對應的內核前綴
            if (typeof style[vendor[i] + 'Transition'] === 'string') {
                return vendor[i];
            }
            i++;
        }
    }
    console.log(getVendorPrefix());
二、JS判斷瀏覽器是否支持某一個CSS3屬性的方法

1、引子
css3的出現讓瀏覽器的表現更加的豐富多彩,表現沖擊最大的就是動畫了,在日常書寫動畫的時候,很有必要去事先判斷瀏覽器是否支持,尤其是在寫CSS3動畫庫的時候。比如transition的animation-play-state,就只有部分瀏覽器支持。
2、檢測方法
下面的方法可以使用腳本判斷瀏覽器是否支持某一個CSS3屬性:

 function supportCss3(style) {
        var prefix = ['webkit', 'Moz', 'ms', 'o'],
            i,
            humpString = [],
            htmlStyle = document.documentElement.style,
            _toHumb = function (string) {
                return string.replace(/-(\w)/g, function ($0, $1) {
                    return $1.toUpperCase();
                });
            };

        for (i in prefix)
            humpString.push(_toHumb(prefix[i] + '-' + style));

        humpString.push(_toHumb(style));

        for (i in humpString)
            if (humpString[i] in htmlStyle) return true;

        return false;
    }

3、使用方法

alert(supportCss3('animation-play-state'));
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,335評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,803評論 0 2
  • 前言 轉自博客園 原文 一、簡單介紹一下什么是瀏覽器內核。瀏覽器最重要或者說核心的部分是“Rendering En...
    吳晗君閱讀 3,682評論 1 30
  • 請你也不要再懷念 又何必追究
    Reddd閱讀 192評論 0 0
  • 楔子 看著路邊一排排胡楊在倒退。車廂由于春運格外的擁擠,熙熙攘攘.縱橫交錯.從車廂的這頭到那頭,猶如高中時跑800...
    藍與綠閱讀 298評論 0 0