自动添加css前缀方法
有关如何给css样式自动添加前缀。
1:step 1
用浏览器原生方法创建一个element获取style,要根据这个创建的element来获取浏览器的前缀
let elementStyle = document.createElement('div').style
2:step 2
一直浏览器的前缀分为五种:
前缀 | 浏览器 |
---|---|
webkit | safari,chrome浏览器 |
moz | firefox浏览器 |
o | Opera浏览器 |
ms | ie浏览器 |
无前缀 | standard默认的 |
所以写一个方法来判断这个element的前缀是什么?
let screenPrefix = (() => {
const prefix = {
webkit: 'webkitTransform', // safari,chrome等
Moz: 'MozTransform', // firefox
O: 'OTransform', // Opera
ms: 'msTransform', // ie
standard: 'transform' // 默认
}
for (let key in prefix) {
if (elementStyle[prefix[key]] !== undefined) {
return key
}
}
return false
3:step 3
向外导出一个方法,可以接受想要添加前缀的css样式
export function addPrefix(style) {
if (screenPrefix) {
// 添加前缀返回的方法是false可能是出error了
return false
}
if (screenPrefix === 'transform') {
// 说明不用添加前缀,默认即可
return style
}
// 驼峰命名
return screenPrefix + style.charAt(0).toUpperCase() + style.substr(1)
}
4:step 4
如果需要添加前缀的话就在需要调用的文件中,直接调用addPrefix()方法即可。
import {
addPrefix } from 'common/js/dom'
const transform = addPrefix('transform')
以上为分享的所有内容。
from-------Tyreal