JS判断浏览器是否支持某一个CSS3属性的方法
作者:微光时间:2026-10-28 15:03:10浏览:243
本文介绍如何使用JavaScript脚本检测浏览器是否支持特定的CSS3属性。通过遍历标准前缀(如webkit、Moz等)及无前缀形式,判断DOM元素style对象中是否存在该属性,从而返回布尔值结果,适用于CSS3动画库开发前的兼容性校验。
CSS3属性兼容性检测原理
1、引子
CSS3的引入使得浏览器视觉效果更加丰富,其中动画效果的视觉冲击力尤为显著。在日常开发动画时,预先判断浏览器是否支持相关属性至关重要,特别是在构建CSS3动画库的过程中。例如,transition中的animation-play-state属性仅被部分浏览器支持。
2、检测方法
以下方法可通过脚本判断浏览器是否支持某一个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;
}
3、使用方法
alert(supportCss3('animation-play-state'));
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
