不同浏览器对于有些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. octave基本指令2

    octave基本指令2 数据移动 >> pwd %显示出当前路径 ans C:\Octave\3.2.4_gcc-4 >> cd 'G:\machine learning' % ...

  2. PAT (Basic Level) Practice 1001 害死人不偿命的(3n+1)猜想

    https://pintia.cn/problem-sets/994805260223102976/problems/994805325918486528 卡拉兹(Callatz)猜想: 对任何一个自 ...

  3. Notepad++和Sublime单词首字符大小写转化问题

  4. Docker镜像加速设置

    地址:https://www.daocloud.io/mirror#accelerator-doc 配置 Docker 加速器 Linux MacOS Windows curl -sSL https: ...

  5. HashMap的实现原理--链表散列

    1.    HashMap概述 HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变. ...

  6. MySQL基本概念以及简单操作

    一.MySQL   MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MyS ...

  7. arctan

    ArcTanWhen the ArcTan functional configuration is selected, the input vector (X_IN,Y_IN) is rotated( ...

  8. 基于Spring Security和 JWT的权限系统设计

    写在前面 关于 Spring Security Web系统的认证和权限模块也算是一个系统的基础设施了,几乎任何的互联网服务都会涉及到这方面的要求.在Java EE领域,成熟的安全框架解决方案一般有 A ...

  9. 自学Python3.5-字符串格式化 作用域 递归

    一.字符串格式化 二.作用域 三.递归

  10. 【BZOJ1925】[SDOI2010]地精部落（动态规划）

    [BZOJ1925][SDOI2010]地精部落(动态规划) 题面 BZOJ 洛谷 题解 一道性质\(dp\)题.(所以当然是照搬学长PPT了啊 先来罗列性质,我们称题目所求的序列为抖动序列: 一个抖 ...