用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 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 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
PHP基本语法总结
2014/09/06 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
yii2实现 "上一篇,下一篇" 功能的代码实例
2017/02/04 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python fileinput模块使用实例
2015/06/03 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
python输入中文的实例方法
2020/09/14 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
30岁生日感言
2014/01/25 职场文书
给老师的一封建议书
2014/03/13 职场文书
ktv好的活动方案
2014/08/17 职场文书
团拜会主持词
2015/07/04 职场文书
致运动员赞词
2015/07/22 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
JavaScript实现登录窗体
2021/06/22 Javascript
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android