浏览器 CSS 属性检测

来源：互联网发布：mac版的千牛可以多开吗编辑：程序博客网时间：2024/04/30 08:34

网页特效的基本，就是利用ＪＳ　动态设置　ＣＳＳ

我们开发网页的时候，一般比较有情怀的公司都只要求兼容到　ＩＥ９　以上，虽然　ＩＥ９　以上已经开始支持　ＣＳＳ３，但是它并不是完全兼容，有些属性需要加前缀。

如果ＪＳ动态设置的时候，也和我们平常写　ＣＳＳ　一样，所有前缀来一遍，先不说效率问题，烦都烦死了。为了解决这个问题，我写了一个用来检测浏览器样式属性的方法，代码如下：

/** * css 属性检测 * @param {string} name * @returns {string|boolean} 检测成功返回属性名，失败则返回 false */var attrProbe = (function() {var prefixs = ['Webkit','Moz','O','ms','Khtml'];var div = document.createElement("div");var style = window.getComputedStyle ? window.getComputedStyle(div) : div.currentStyle;// 将首字母转换为大写function upperFirstChar(name) {return name.replace(/^\w{1}/, function(value) {return value.toUpperCase();});}return function(name) {var result = false;if(typeof name !== "string" || !!!name) {throw new TypeError("param must is a string");}if(name in style) {return name;}for(var i = 0; i < prefixs.length; i++) {var styleName = prefixs[i] + upperFirstChar(name);if(!!style[styleName]) {result = styleName;break;}}return !!result ? result : false;};}());

这是我目前想到的做法，稍稍记录一下，以便日后查阅与改进，若能得前辈指点，感激不尽！！

0 0