用JavaScript判断CSS浏览器类型前缀的两种方法


Posted in Javascript onOctober 08, 2015

不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在CSS里(例如“-moz-”)和在JS里。有一个神奇的 X-Tag 项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的!

比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chrome 是 "-webkit-"。JavaScript 有多种方式判断它们。

方法1: 特性判断

// 取浏览器的 CSS 前缀
var prefix = function() {
  var div = document.createElement('div');
  var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';
  div.style.cssText = cssText;
  var style = div.style;
  if (style.webkitTransition) {
    return '-webkit-';
  }
  if (style.MozTransition) {
    return '-moz-';
  }
  if (style.oTransition) {
    return '-o-';
  }
  if (style.msTransition) {
    return '-ms-';
  }
  return '';
}();

通过创建一个div,给其分别添加 -webkit-、-moz-、-o-、-ms- 的前缀 css 样式,然后获取 style,通过 style.xxxTransition 判断是哪种前缀。

方法2: getComputedStyle 获取 documentElement 所有样式再解析

先通过 window.getComputedStyle 获取 styles,将 styles 转成数组

var styles = window.getComputedStyle(document.documentElement, '');
var arr = [].slice.call(styles);
console.log(arr);

Firefox arr 如下

用JavaScript判断CSS浏览器类型前缀的两种方法

Chrome arr 如下

用JavaScript判断CSS浏览器类型前缀的两种方法

能看到取到了具有各自浏览器自身实现的 CSS 前缀名称。

把所有属性连接成一个字符串,然后用正则表达式匹配就能找出前缀了

// 取浏览器的 CSS 前缀
var prefix = function() {
  var styles = window.getComputedStyle(document.documentElement, '');
  var core = (
    Array.prototype.slice
    .call(styles)
    .join('')
    .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
  )[1];
  return '-' + core + '-';
}();

 我们看到 方法2 比 方法1 代码量少了许多。无论是方法1 和 方法2 ,都采用匿名函数一次性执行后返回结果,不需要每次判断都调用一下函数。

以上内容就是小编通过两种方法给大家介绍的用JavaScript判断CSS浏览器类型前缀,希望大家喜欢。

Javascript 相关文章推荐
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 #Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 #Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 #Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 #Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 #Javascript
javascript日期格式化方法汇总
Oct 04 #Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 #Javascript
You might like
提取HTML标签
2006/10/09 PHP
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
javascript实现tab切换的四种方法
2015/11/05 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
浅谈python中set使用
2016/06/30 Python
python sys.argv[]用法实例详解
2018/05/25 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
大学生自荐书范文
2013/12/10 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
2014年党支部学习材料
2014/05/19 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年教务工作总结
2014/12/03 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python