JS控制CSS3,添加瀏覽器兼容前綴

不一樣瀏覽器對於有些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

相關文章
相關標籤/搜索