当我们想用某个css新特性时，总是会在意它的兼容性情况，或许我们会去搜索它的兼容性，哪些浏览器合适哪些不合适，在这些已知的情况下再选择是不是使用或如何使用，这是一个已知我们即将用于什么浏览器下作出的选择。

但我们往往不知道自己开发的页面用户会在哪个浏览器上进行打开，这时我们需要根据实际使用浏览器情况来判断采用何策略。这时就需要用js来判断，我们要使用css属性能否起效。

css属性的兼容性，是有两类的，一类是，css属性本身，如 position ；另一类是，css属性值，如，对于 position 属性的 sticky 值

目标

我们想知道某个css属性（值）是否起效，一般被告知结果是“起效”或“不起效”。但是css属性存在浏览器私有属性一说，即会有加了浏览器前缀才会生效的css属性。

所以你更加需要知道，对于目前浏览器来说，哪个前缀或不需要前缀的css属性才会起效，而不仅仅是知道起效与否（自己每个前缀作为输入值进行校验，是繁琐的！网络上的很多资料往往会告诉你是否支持你指定的css，返回的boolean值）

所以下面的方法， 只需要你把css属性（值）作为输入值，不需要带上前缀，便能告知你，当前使用的浏览器支持哪个前缀的用法或压根不需要前缀。

检查css属性名

该方法检查的是css的属性本身，即属性名，即写css的时候 : 的左侧。如果返回值是空，那么证明浏览器不支持该属性。

/** * 告知浏览器支持的指定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中的形式    // 经尝试，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;}/** * 把有连字符号的字符串转化为驼峰命名法的字符串 */function toCamelCase(value) {    return value.replace(/-(w)/g, (matched, letter) => {       return letter.toUpperCase();   });}

检查css属性值

该方法检查的是css的属性的值，即写css的时候 : 的右侧。如果返回值是空，那么证明浏览器不支持该属性值。

这里分为两个版本，一个是es6版本，一个是基础的js版本。

纯属自己多余写了两个版本

/** * 检查浏览器是否支持某个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;    // 应用每个前缀的情况，且最后也要应用上没有前缀的情况，看最后浏览器起效的何种情况    // 这就是最好在prefix里的最后一个元素是    prefixValue.forEach(item => {        eleStyle[key] = item;    });    return eleStyle[key];}/** * 检查浏览器是否支持某个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];}

总结

我们可以简单地上述对于两种形式的css兼容性进行合并，不用显式地采用调用检查属性名还是属性值的方法，直接传入css，告知浏览器支持的情况。

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

到此这篇关于js判断并告知支持css属性（值）的 情况分析的文章就介绍到这了,更多相关js 判断css属性值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！