前言：在開發前端項目的時候，我們有時候需要通過js來操作css的樣式，對於不同的瀏覽器，我們可以要把一個樣式書寫很多遍，例如我們在爲某個元素添加transform樣式的時候：
let app = document.getElementById('app')
app.style.transform = 'scale(1.5)' // 正常瀏覽器
app.style['webkitTransform'] = 'scale(1.5)' // 谷歌瀏覽器
app.style['mozTransform'] = 'scale(1.5)' // 火狐瀏覽器
.....其他瀏覽器等等
如果我們經常需要在js中添加樣式，那麼代碼量就會變得非常的巨大。我們可以通過封裝一些方法來處理這個瀏覽器兼容問題。封裝完之後，我們就可以用一句就代碼就處理各個瀏覽器樣式名的寫法。
app.style[prefixStyle('transform')]= 'scale(1.5)' // 處理上述重複代碼
第一步：
創建一個dom對象，獲取他的style屬性
let elementStyle = document.createElement('div').style
第二步：
創建一個自調用函數，在函數裏面，創建一個transform樣式在各個瀏覽器的寫法。然後遍歷這個對象，使用elementStyle來判斷在目前瀏覽器transform的寫法，然後返回對應瀏覽器的標識：
let vendor = (() => {
// 3.存儲各個瀏覽器的樣式寫法。用transform來做比較
let transformNames = {
webkit: 'webkitTransform',
o: 'OTransform',
moz: 'MozTransform',
ms: 'msTransform',
standard: 'transform'
}
// 遍歷transformNames對象
for (let key in transformNames) {
// 判斷style上是否存在對應的屬性
if (elementStyle[transformNames[key]] !== undefined) {
// 存在就返回
return key
}
}
// 樣式出錯返回false
return false
})()
第三步：
封裝一個處理樣式寫法的函數，接收參數的css屬性字符串，返回該樣式在目前瀏覽器支持的寫法：
// 4.編寫處理樣式函數
function prefixStyle(style) {
console.log(vendor)
// 出錯
if (!vendor) {
return
}
// 正常
if (vendor === 'standard') {
return style
}
// 各個瀏覽器的兼容
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
第四步：
使用封裝的函數，假如我們需要在js中添加transform樣式，我們可以這樣做：
let app = document.getElementById('app')
// 獲取transform在目前瀏覽器的兼容寫法
const transform = prefixStyle('transform')
// 添加css樣式
app.style[transform] = 'scale(1.5)
例子全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="app" style="width: 100px;height: 100px; background-color: red;"></div>
</body>
<script>
// 1.創建一個元素，使用他的style屬性
let elementStyle = document.createElement('div').style
// 2.構建一個自動執行函數，讓他返回瀏覽器的標識，例如：webkit(谷歌)、o(歐朋)、moz(火狐)、ms(ie)、standard(這個是用來標識正常的)。
let vendor = (() => {
// 3.存儲各個瀏覽器的樣式寫法。用transform來做比較
let transformNames = {
webkit: 'webkitTransform',
o: 'OTransform',
moz: 'MozTransform',
ms: 'msTransform',
standard: 'transform'
}
// 遍歷transformNames對象
for (let key in transformNames) {
// 判斷style上是否存在對應的屬性
if (elementStyle[transformNames[key]] !== undefined) {
// 存在就返回
return key
}
}
// 樣式出錯返回false
return false
})()
// 4.編寫處理樣式函數
function prefixStyle(style) {
console.log(vendor)
// 出錯
if (!vendor) {
return
}
// 正常
if (vendor === 'standard') {
return style
}
// 各個瀏覽器的兼容
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
console.log(prefixStyle('transform')) // webkitTransform
console.log(prefixStyle('fontSmooth')) // webkitFontSmooth
console.log(prefixStyle('fontSize')) // webkitFontSize
let app = document.getElementById('app')
// 獲取transform在目前瀏覽器的兼容寫法
const transform = prefixStyle('transform')
// 添加css樣式
app.style[transform] = 'scale(1.5)'
</script>
</html>