网页特效的基本,就是利用 JS 动态设置 CSS
我们开发网页的时候,一般比较有情怀的公司都只要求兼容到 IE9 以上,虽然 IE9 以上已经开始支持 CSS3,但是它并不是完全兼容,有些属性需要加前缀。
如果JS动态设置的时候,也和我们平常写 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;
};
}());