不同浏览器对于有些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. shell脚本第一课

    shell脚本的文件名一般是以.sh结尾,也可以以其他格式如.txt,甚至不加后缀. 脚本的第一行的#!/bin/bash表示指定脚本执行时的解析器. #!/bin/bash #文件名:test.sh ...

  2. js十大排序算法：冒泡排序

    排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...

  3. Appium学习笔记4_元素定位方法

    Appium之元素定位,如果对Android上如何使用工具获取页面元素有问题的,请转战到这:http://www.cnblogs.com/taoSir/p/4816382.html. 下面主要是针对自 ...

  4. PGSQL 获取数据库大小以及表达小等的SQL

    SELECT d.datname AS Name, pg_catalog.pg_get_userbyid(d.datdba) AS Owner, CASE WHEN pg_catalog.has_da ...

  5. Oracle ORDS的简单SQL配置模板

    1. 先加上简单的SQL配置模板. DECLARE PRAGMA AUTONOMOUS_TRANSACTION; BEGIN ORDS.ENABLE_SCHEMA(p_enabled => TR ...

  6. vCenter简单查看多少虚拟机在开机状态和一共多少虚拟机

    vCenter 界面上面不好找 具体的开机 运行数目 但是数据库里面比较好差 登录vCenter的数据库. 查看表主要是 查看正在开机的虚拟机 select * from dbo.VPX_VM WHE ...

  7. sql优化问题笔记（mysql）

    相信大家平时面试都会遇到这个问题:平时你都是怎么对sql进行调优的? 此篇文章相当于一个随便笔记,根据朋友们的聊天记录整理而成,如有不对,请指正! 注意:这篇是以mysql整理的 查看sql计划分析 ...

  8. Delphi动态添加菜单

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. mybatis model属性注入多个对象 与model属性注入单个对象

  10. ansible系列4-关闭ssh首次连接时提示

    在ansible配置文件中找到 /etc/ansible/ansible.cfg 方法1 在配置文件中找到 了解到问题原因为,我们了解到进行ssh连接时,可以使用-o参数将StrictHostKeyC ...