前言:在开发前端项目的时候,我们有时候需要通过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>