JS控制CSS3，添加浏览器兼容前缀

时间 2019-12-08

标签控制 css3 css 添加浏览器兼容前缀栏目 JavaScript 繁體版

原文原文链接

不一样浏览器对于有些css3属性名字定义的时候，会带上特有的前缀，因此在css编写的时候，常常会一个属性写多个不一样的前缀进行兼容。好比：javascript

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

有时候，咱们须要经过js动态控制css3属性，这时候就须要根据不一样的浏览器添加不一样的前缀。固然，咱们也能够将全部的前缀所有设置，就像如下这种方式：css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>JS控制CSS3，添加浏览器兼容前缀</title>
  </head>
  <body>
       <div id="target" style="background: blue">
      测试
   </div>
  </body>
  <script type="text/javascript">
    var target = document.getElementById("target"); 
    target.style.MozTransform = 'rotate(30deg)';
    target.style.OTransform = 'rotate(30deg)';
    target.style.msTransform = 'rotate(30deg)';
    target.style.transform = 'rotate(30deg)';
    target.style.webkitTransform = 'rotate(30deg)';
  
  </script>
</html>

这种方式可以设置属性成功，可是看起来就不是很优雅。代码冗余，并且设置了不少无效的属性。这里能够经过如下的方式，给不一样的浏览器加上合适的前缀。html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>JS控制CSS3，添加浏览器兼容前缀</title>
  </head>
  <body>
    <div id="target" style="background: blue">
      测试
    </div>
  </body>
  <script type="text/javascript">
  var elementStyle = document.createElement('div').style;
  var vendor = (function(){
  var transformNames = {
      webkit: 'webkitTransform',
      Moz: 'MozTransform',
      O: 'OTransform',
      ms: 'msTransform',
      standard: 'transform'
    };

    for (var 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);
  }
  target.style[prefixStyle('transform')] = 'rotate(30deg)'
  </script>
</html>

采用相似于能力检测的方式，找到对应浏览器内核支持的前缀。而后按照规则修改属性，添加前缀。java