首页 > 代码库 > document.documentElement.style判断浏览器是否支持Css3属性
document.documentElement.style判断浏览器是否支持Css3属性
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‘)); //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
关于浏览器支持的Css属性列表,google如下:其他浏览器不在列举了
document.documentElement.style判断浏览器是否支持Css3属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。