使用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
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!