js分辨并告之适用css特性(值)的 状况剖析

日期:2021-02-28 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

当大家想用某个css新特点时,一直会在乎它的适配性格况,也许大家会去检索它的适配性,哪些访问器适合哪些不符合适,在这些已知的状况下再挑选是否应用或怎样应用,这是1个已知大家将要用于甚么访问器下作出的挑选。

但大家常常不知道道自身开发设计的网页页面客户会在哪儿个访问器勤奋行开启,这时候大家必须依据具体应用访问器状况来分辨选用何对策。这时候就必须用js来分辨,大家要应用css特性能否见效。

css特性的适配性,是有两类的,1类是,css特性自身,如 position ;另外一类是,css特性值,如,针对 position 特性的 sticky 值

总体目标

大家想了解某个css特性(值)是不是见效,1般被告之結果是“见效”或“不见效”。可是css特性存在访问器独享特性1说,即会有加了访问器前缀才会起效的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的情况下 : 的右边。假如回到值是空,那末证实访问器不适用该特性值。

这里分成两个版本号,1个是es6版本号,1个是基本的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里的最终1个元素是''
    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特性值內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!