[vuejs源码系列] auto detect CSS prefix

Posted 2021-05-01 大前端视野

编语：

     抽取 Vue.js 里面不错的代码片段，分享给大家。

正文：

    之前应该也有同学遇到类似的问题：

使用 v-bind:style 绑定 -webkit-filter 无效

先看作者的答复：

后来作者 fix 了这个问题：

作者的这个代码也借鉴了著名的 paulirish 的一段：

区别在于：

• while i-- 替代 for

• testEl 命名更友好

// find out what prefix this browser supports.

// usage: gimmePrefix('transform') // 'WebkitTransform'

//        returns false if unsupported.

function gimmePrefix(prop){

  var prefixes = ['Moz','Khtml','Webkit','O','ms'],

      elem     = document.createElement('div'),

      upper    = prop.charAt(0).toUpperCase() + prop.slice(1);

  if (prop in elem.style)

    return prop;

        

  for (var len = prefixes.length; len--; ){

    if ((prefixes[len] + upper)  in elem.style)

      return (prefixes[len] + upper);

  }

 

  return false;

}