不同浏览器对于有些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. Oracle 控制文件管理

    控制文件是一个很小的二进制文件(10MB左右),含有数据库结构信息,包括数据文件和日志文件信息.控制文件在数据库创建时被自动创建,并在数据库发生物理变数时更新.控制文件被不断更新,在任何时候都要保证控 ...

  2. [转帖]ASP.NET Core的Kestrel服务器

    ASP.NET Core的Kestrel服务器 https://cloud.tencent.com/developer/article/1023247 在这篇文章中: 何时使用Kestrel和反向代理 ...

  3. [日常工作]GS使用消息队列进行凭证实时记账 提高性能配置方法

    1. 安装消息队列服务 使用平台技术部的一键安装工具,安装. 自带jdk以及activeMQ 自动注册服务. 比较方便. 2. 修改/gsp/config下面的MQ配置文件,将消息队列服务修改为当前虚 ...

  4. Java和Spring邮件的发送

    方法一: java发送电子邮件:这里以发送qq邮件为例: package test; import java.util.Properties; import javax.mail.Authentica ...

  5. 洛谷P3066 [USACO12DEC]逃跑的BarnRunning Away From…

    题面链接 一句话题意:给出以1号点为根的一棵有根树,问每个点的子树中与它距离小于等于l的点有多少个. 我:似乎并不好做啊...看了题解后大雾... sol:考虑树上差分,对于一个点,在他那个位置++, ...

  6. UVA11987 Almost Union-Find

    题目描述 PDF 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 5 7 1 1 2 2 3 4 1 3 5 3 4 2 4 1 3 4 3 3 输出样例#1: 3 12 3 7 ...

  7. Ouroboros Snake POJ - 1392（数位哈密顿回路）

    看hdu 2894的题意  两个题一样 旋转鼓的表面分成m块扇形,如图所示(m=8).图中阴影区表示用导电材料制成,空白区用绝缘材料制成,终端a.b和c是3(k=3)处接地或不是接地分别用二进制信号0 ...

  8. LightOJ - 1356 Prime Independence (二分图 最大独立集 素数打表)

    题意: 给你一个集合,让你从这个集合中挑选出几个数,使得这几个数中任意两个数相除后的值不能为素数 即挑选出来的这几个数不能互相冲突 最大独立集 = 所有点数 - 最大匹配数 呵..呵...原先用的二维 ...

  9. MT【20】一道三次函数的难题

    评:这道题由于系数弄得不是很好,涉及的难度为联赛一试+难度.中间用到了$Sturm$定理,还涉及到一些代 数变形技巧,最后一个求关于$m$的三次方程又涉及到三次方程的求法.一个小时讲这一道题也不为过.

  10. 【Gym - 101124A】The Baguette Master （数学，几何）

    BUPT2017 wintertraining(15) #4F Gym - 101124A 题意 给定画框宽度,画的四边和一个对角线长度,求画框外沿周长. 题解 过顶点做画框的垂线,每个角都得到两个全 ...