zoukankan      html  css  js  c++  java
  • JS控制CSS3,添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容。比如:

    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属性,这时候就需要根据不同的浏览器添加不同的前缀。当然,我们也可以将所有的前缀全部设置,就像以下这种方式:

    <!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>

    这种方式能够设置属性成功,但是看起来就不是很优雅。代码冗余,而且设置了很多无效的属性。这里可以通过以下的方式,给不同的浏览器加上合适的前缀。

    <!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>

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

  • 相关阅读:
    垃圾分类科普小游戏-体感垃圾分类-互动环境保护宣传软件
    卧式互动触摸查询一体机-智能触屏服务系统-触摸一体机
    卧式触摸查询一体机-政务查询触控系统-液晶多媒体触摸一体机
    卧式触摸屏自助查询一体机-智能触控一体机软件-自助终端机
    卧式触摸查询互动一体机-自助终端机-智慧城市办事大厅自助服务设备
    恒生内推
    Redis5设计与源码分析读后感(一)认识Redis
    Java Web学习(十二)Tomcat核心
    Java Web学习(四)http协议
    算法学习(三)直接插入排序
  • 原文地址:https://www.cnblogs.com/caizhenbo/p/7569353.html
Copyright © 2011-2022 走看看