不同浏览器对于有些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>

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

JS控制CSS3，添加浏览器兼容前缀的更多相关文章

  1. css自动添加浏览器兼容前缀 autoprefixer设置

    Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...

  2. webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

    1.在webpack中需要处理css必须先安装如下两个loader npm install --save-dev css-loader style-loader 2.要处理sass和添加浏览器前缀需要 ...

  3. CSS3常用属性浏览器兼容前缀

    1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\ ...

  4. vue打包添加样式兼容前缀

    在ios8 版本上的h5对flex的支持不太好,需要有兼容的写法. vue-cli自带了postCss autoprefixer 进行兼容处理,配置如下 在vue-loader.config.js中开 ...

  5. js快速判断IE浏览器(兼容IE10与IE11)

    在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器   1 判断IE浏览器与非IE 浏览器 IE浏览器与非IE ...

  6. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...

  7. js iframe onload &line-height浏览器兼容问题

    1.IE iframe onload事件 在IE下给iframe添加onload事件经常无效,因为在IE下它最多只能被激活一次,而且无论你有多少个iframe,被激活的也只能是最后一个的.可以用下面的 ...

  8. js Date()日期函数浏览器兼容问题解决方法

    一般 直接new Date() 是不会出现兼容性问题的,而 new Date(datetimeformatstring) 常常会出现浏览器兼容性问题,为什么,datetimeformatstring中 ...

  9. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

随机推荐

  1. [工作相关] 一个虚拟机上面的SAP4HANA的简单使用维护

    1.公司组织竞品分析, 选择了SAP的 SAP4HANA作为竞品 这边协助同事搭建了SAP4HANA的测试环境: 备注 这个环境 应该是同事通过一些渠道获取到的. 里面是基于这个虚拟机进行的说明:: ...

  2. Node fs模块异步读取验证并异步写入

    console.log("1:开始读成取文件内容...");fs.readFile('./public/2.log',function(err,data){ if(err){ co ...

  3. os模块+sys模块+random模块+shutil模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cdos.curdir ...

  4. python Thread、lock

    Python的标准库提供了两个模块:_thread和threading,_thread是低级模块,threading是高级模块,对_thread进行了封装.绝大多数情况下,我们只需要使用threadi ...

  5. Test Scenarios for result grid

    1 Page loading symbol should be displayed when it is taking more than default time to load the resul ...

  6. 非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通过id进行维护与建文件

     非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通 ...

  7. 安卓创始人计划推出能帮你约会的AI手机

    安卓操作系统的创始人安迪·鲁宾早些年已经离开谷歌公司,离开谷歌后鲁宾成立Essential  Phone手机品牌.不过正如你所知道的那样尽管安迪·鲁宾有着很大的名气,但Essential  Phone ...

  8. Threed.sleep是不会释放锁，而wait是释放锁的(对象锁)

    实战分析 一直都说,Threed.sleep是不会释放锁,而wait是释放锁的(对象锁),现理论上来分析一下啊. v package thread.concurrent; public class D ...

  9. Azure HDInsight 上的 Spark 群集配合自定义的Python来分析网站日志

    一.前言:本文是个实践博客,演示如何结合使用自定义库和 HDInsight 上的 Spark 来分析日志数据. 我们使用的自定义库是一个名为 iislogparser.py的 Python 库. 每步 ...

  10. ASP.NET Session的实现原理分析

    ASP.NET Session的实现原理分析 用户向服务器提交请求时,服务器都会给每个用户分配一个SessionId,保存在用户浏览器的Cookies中,SessionId是全局的,也就是说只要Coo ...