document.documentElement.style判斷瀏覽器是否支援Css3屬性

標籤：function   pre   ports   src   ring   animation   使用   img   auth   

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

包括帶首碼的和不帶首碼的

例如：animation，webkitAnimation，msAnimation等

2.判斷瀏覽器是否支援制定的css屬性

function support(cssName) {    var htmlStyle = document.documentElement.style;    if (cssName in htmlStyle)        return true;    return false;}alert(support(‘animate‘)); //falsealert(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‘));//falseconsole.info(window.CSS.supports(‘animate‘)); //falseconsole.info(window.CSS.supports(‘animation‘,‘liear‘));//trueconsole.info(window.CSS.supports(‘border‘, ‘1px solid red‘));//true

 

關於瀏覽器支援的Css屬性列表，google如下：其他瀏覽器不在列舉了

 

document.documentElement.style判斷瀏覽器是否支援Css3屬性