document.documentElement.style用法

南城夏季發表於2018-04-12

1.document.documentElement.style 屬性定義了當前瀏覽器支援的所有Css屬性

包括帶字首的和不帶字首的

例如：

document.documentElement.style.fontSize
2.判斷瀏覽器是否支援制定的css屬性
function support(cssName) {
    var htmlStyle = document.documentElement.style;
    if (cssName in htmlStyle)
        return true;
    return false;
}
alert(support(‘animate‘)); //false
alert(support(‘animation‘)); //true
3.判斷當前瀏覽器是否支援支援Css3的屬性、包括帶字首的。
/**
* 判斷瀏覽器是否支援某一個CSS3屬性,包括帶字首的和不太字首的
* @param {String} 屬性名稱
* @return {Boolean} true/false
* @version 1.0
* @author ydr.me
* 2014年4月4日14:47:19
*/
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;
}
alert(supportCss3(‘animation‘));//true
4.在Google瀏覽器中還可以使用window.CSS.supports判斷css的屬性和值
/*
* 在Google瀏覽器中可以使用 window.CSS.supports判斷瀏覽器是否支援制定css屬性和值
*/
console.info(window.CSS);
console.info(window.CSS.supports(‘animation‘));//false
console.info(window.CSS.supports(‘animate‘)); //false
console.info(window.CSS.supports(‘animation‘,‘liear‘));//true
console.info(window.CSS.supports(‘border‘, ‘1px solid red‘));//true

            




相關文章