js如何判斷并告知支持css屬性的情況

這篇文章主要介紹js如何判斷并告知支持css屬性的情況，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

當(dāng)我們想用某個(gè)css新特性時(shí)，總是會在意它的兼容性情況，或許我們會去搜索它的兼容性，哪些瀏覽器合適哪些不合適，在這些已知的情況下再選擇是不是使用或如何使用，這是一個(gè)已知我們即將用于什么瀏覽器下作出的選擇。

但我們往往不知道自己開發(fā)的頁面用戶會在哪個(gè)瀏覽器上進(jìn)行打開，這時(shí)我們需要根據(jù)實(shí)際使用瀏覽器情況來判斷采用何策略。這時(shí)就需要用js來判斷，我們要使用css屬性能否起效。

css屬性的兼容性，是有兩類的，一類是，css屬性本身，如 position ；另一類是，css屬性值，如，對于 position 屬性的 sticky 值

目標(biāo)

我們想知道某個(gè)css屬性（值）是否起效，一般被告知結(jié)果是“起效”或“不起效”。但是css屬性存在瀏覽器私有屬性一說，即會有加了瀏覽器前綴才會生效的css屬性。

所以你更加需要知道，對于目前瀏覽器來說，哪個(gè)前綴或不需要前綴的css屬性才會起效，而不僅僅是知道起效與否（自己每個(gè)前綴作為輸入值進(jìn)行校驗(yàn)，是繁瑣的！網(wǎng)絡(luò)上的很多資料往往會告訴你是否支持你指定的css，返回的boolean值）

所以下面的方法， 只需要你把css屬性（值）作為輸入值，不需要帶上前綴，便能告知你，當(dāng)前使用的瀏覽器支持哪個(gè)前綴的用法或壓根不需要前綴。

檢查css屬性名

該方法檢查的是css的屬性本身，即屬性名，即寫css的時(shí)候 : 的左側(cè)。如果返回值是空，那么證明瀏覽器不支持該屬性。

/**
 * 告知瀏覽器支持的指定css屬性情況
 * @param {String} key - css屬性，是屬性的名字，不需要加前綴
 * @returns {String} - 支持的屬性情況
 */
function validateCssKey(key) {
    const jsKey = toCamelCase(key); // 有些css屬性是連字符號形成
    if (jsKey in document.documentElement.style) {
        return key;
    }
    let validKey = '';
    // 屬性名為前綴在js中的形式，屬性值是前綴在css中的形式
    // 經(jīng)嘗試，Webkit 也可是首字母小寫 webkit
    const prefixMap = {
        Webkit: '-webkit-',
        Moz: '-moz-',
        ms: '-ms-',
        O: '-o-'
    };
    for (const jsPrefix in prefixMap) {
        const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`);
        if (styleKey in document.documentElement.style) {
            validKey = prefixMap[jsPrefix] + key;
            break;
        }
    }
    return validKey;
}

/**
 * 把有連字符號的字符串轉(zhuǎn)化為駝峰命名法的字符串
 */
function toCamelCase(value) {
    return value.replace(/-(\w)/g, (matched, letter) => {
       return letter.toUpperCase();
   });
}

檢查css屬性值

該方法檢查的是css的屬性的值，即寫css的時(shí)候 : 的右側(cè)。如果返回值是空，那么證明瀏覽器不支持該屬性值。

這里分為兩個(gè)版本，一個(gè)是es6版本，一個(gè)是基礎(chǔ)的js版本。

純屬自己多余寫了兩個(gè)版本

/**
 * 檢查瀏覽器是否支持某個(gè)css屬性值（es6版）
 * @param {String} key - 檢查的屬性值所屬的css屬性名
 * @param {String} value - 要檢查的css屬性值（不要帶前綴）
 * @returns {String} - 返回瀏覽器支持的屬性值
 */
function valiateCssValue (key, value) {
    const prefix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    const prefixValue = prefix.map(item => {
        return item + value;
    });
    const element = document.createElement('div');
    const eleStyle = element.style;
    // 應(yīng)用每個(gè)前綴的情況，且最后也要應(yīng)用上沒有前綴的情況，看最后瀏覽器起效的何種情況
    // 這就是最好在prefix里的最后一個(gè)元素是''
    prefixValue.forEach(item => {
        eleStyle[key] = item;
    });
    return eleStyle[key];
}

/**
 * 檢查瀏覽器是否支持某個(gè)css屬性值
 * @param {String} key - 檢查的屬性值所屬的css屬性名
 * @param {String} value - 要檢查的css屬性值（不要帶前綴）
 * @returns {String} - 返回瀏覽器支持的屬性值
 */
function valiateCssValue (key, value) {
    var prefix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    var prefixValue = [];
    for (var i = 0; i < prefix.length; i++) {
        prefixValue.push(prefix[i] + value)
    }
    var element = document.createElement('div');
    var eleStyle = element.style;
    for (var j = 0; j < prefixValue.length; j++) {
         eleStyle[key] = prefixValue[j];
    }
    return eleStyle[key];
}

總結(jié)

我們可以簡單地上述對于兩種形式的css兼容性進(jìn)行合并，不用顯式地采用調(diào)用檢查屬性名還是屬性值的方法，直接傳入css，告知瀏覽器支持的情況。

function validCss (key, value) {
    const validCss = validateCssKey(key);
    if (validCss) {
        return validCss;
    }
    return valiateCssValue(key, value);
}

以上是“js如何判斷并告知支持css屬性的情況”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！