js修改css时如何考虑兼容性问题es5+es6

Posted 2020-10-02 韩帅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js修改css时如何考虑兼容性问题es5+es6相关的知识，希望对你有一定的参考价值。

es5的写法

var elementStyle = document.createElement(‘div‘).style

var  vendor = (function(){
  let transformNames = {
    webkit: ‘webkitTransform‘,
    Moz: ‘MozTransform‘,
    O: ‘OTransform‘,
    ms: ‘msTransform‘,
    standard: ‘transform‘
  }

  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()

function prefixStyle(style) {
  if (vendor === false) {
    return false
  }

  if (vendor === ‘standard‘) {
    return style
  }

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

使用方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试es5</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10             box-sizing: border-box;
11         }
12         #el{
13             width: 100px;
14             height: 100px;
15             background-color: red;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="el"></div>
21     <script>
22         var elementStyle = document.createElement(‘div‘).style
23 
24 var  vendor = (function(){
25   let transformNames = {
26     webkit: ‘webkitTransform‘,
27     Moz: ‘MozTransform‘,
28     O: ‘OTransform‘,
29     ms: ‘msTransform‘,
30     standard: ‘transform‘
31   }
32 
33   for (let key in transformNames) {
34     if (elementStyle[transformNames[key]] !== undefined) {
35       return key
36     }
37   }
38 
39   return false
40 })()
41 
42 function prefixStyle(style) {
43   if (vendor === false) {
44     return false
45   }
46 
47   if (vendor === ‘standard‘) {
48     return style
49   }
50 
51   return vendor + style.charAt(0).toUpperCase() + style.substr(1)
52 }
53 document.getElementById(‘el‘).onmouseenter=function(){
54     document.getElementById(‘el‘).style[prefixStyle(‘transform‘)] =‘scale(1.5)‘
55 }
56 document.getElementById(‘el‘).onmouseleave=function(){
57     document.getElementById(‘el‘).style[prefixStyle(‘transform‘)] =‘scale(1)‘
58 }
59 
60     </script>
61 </body>
62 </html>

es6的写法

 1 let elementStyle = document.createElement(‘div‘).style
 2 
 3 let vendor = (() => {
 4   let transformNames = {
 5     webkit: ‘webkitTransform‘,
 6     Moz: ‘MozTransform‘,
 7     O: ‘OTransform‘,
 8     ms: ‘msTransform‘,
 9     standard: ‘transform‘
10   }
11 
12   for (let key in transformNames) {
13     if (elementStyle[transformNames[key]] !== undefined) {
14       return key
15     }
16   }
17 
18   return false
19 })()
20 
21 export function prefixStyle(style) {
22   if (vendor === false) {
23     return false
24   }
25 
26   if (vendor === ‘standard‘) {
27     return style
28   }
29 
30   return vendor + style.charAt(0).toUpperCase() + style.substr(1)
31 }

以上是关于js修改css时如何考虑兼容性问题es5+es6的主要内容，如果未能解决你的问题，请参考以下文章

最简单es6 7 等转es5 babel配置

ES6学习一--ES5

ES6以上版本代码要不要转码成ES5?