使用js操作DOM元素样式时，如果在不知道前缀的情况下，每次都要添加不少浏览器兼容前缀的代码，会显得代码十分多，可不可以实现自动检测浏览器前缀，自动添加合适的前缀的方法呢？
要实现这个功能，其实是对浏览器进行能力检测，通过设置特定属性，检测浏览器前缀。
实现细节如下：
const elementStyle = document.createElement('div').style
let prefix = (() => {
let prefixMap = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in prefixMap) {
if (elementStyle[prefixMap[key]] !== undefined) {
return key
}
}
return false
})();
const autoPrefixStyle = prop => {
if(!prefix) return false
if(prefix === 'standard') return prop
return prefix + prop.charAt(0).toUpperCase() + prop.substr(1)
}
此时，比如我设置css属性时，该方法会自动为其添加前缀。
例如在chrome浏览器中
autoPrefixStyle('transform')
//输出：webkitTransform
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
说点什么