码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-13 09:55:29      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:mst   str   round   end   add   tee   cal   htm   ref   

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

标签:mst   str   round   end   add   tee   cal   htm   ref   

原文地址:http://www.cnblogs.com/shuaihan/p/7352244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!