浏览器 CSS 属性检测

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

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

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

/**
 * 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;
	};
}());

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