不同浏览器对于有些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. 在XShell中使用sz和rz命令下载和上传文件

    借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器 工具/原料   XShell CentOS 6.5 使用sz下载文件   1 输 ...

  2. Qt__事件处理机制

    一.Qt事件 Qt会将系统消息(如鼠标按键.键盘按键等)转化为Qt事件,Qt事件被封装为对象且定义该对象的类均继承自抽象类QEvent. 二.Qt事件的产生 1.操作系统产生 Spontaneous ...

  3. BZOJ1798[Ahoi2009]维护序列——线段树

    题目描述     老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成.    有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2 ...

  4. BZOJ2351[BeiJing2011]Matrix——二维hash

    题目描述 给定一个M行N列的01矩阵,以及Q个A行B列的01矩阵,你需要求出这Q个矩阵哪些在原矩阵中出现过.所谓01矩阵,就是矩阵中所有元素不是0就是1. 输入 输入文件的第一行为M.N.A.B,参见 ...

  5. Docker报错总结

    [Docker push镜像报错] The push refers to a repository [192.168.200.103:5000/rancher/server]Get https://1 ...

  6. Problem B. Harvest of Apples HDU - 6333（莫队）

    Problem Description There are n apples on a tree, numbered from 1 to n.Count the number of ways to p ...

  7. 自定义git忽略规则

    输入命令 >a.o git status 此时我想让git忽略这个文件的更新 输入命令 > .gitignore echo "a.o" >> .gitign ...

  8. MT【226】费马点两题

    已知$z_1=2\sqrt{3}i,z_2=3,z_3=-3,|z_3-z_4|=2\sqrt{3},$则$|z_1-z_4|+|z_2-z_4|$的最小值为_____ 提示:费马点最小,取$Z_4( ...

  9. [HNOI2005]狡猾的商人 ，神奇做法——贪心

    洛谷P2294 [HNOI2005]狡猾的商人 ,神奇做法--贪心 看到大牛都是写的差分约束或带权并查集,本蒟蒻都不太会(还是用差分约束过了的QAQ),但是想出一种贪心的策略,运用神奇的优先队列实现. ...

  10. 洛谷 P2292 [HNOI2004] L语言 解题报告

    P2292 [HNOI2004] L语言 题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章\(T\)是由若干小写字母构成.一个单词 ...