用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 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
Feb 02 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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与XML的PDF文档生成技术
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python描述器descriptor详解
2015/02/03 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
银行实习鉴定
2013/12/13 职场文书
读书演讲主持词
2014/03/18 职场文书
个人评语大全
2014/05/04 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
员工家属慰问信
2015/03/24 职场文书
开学第一周值周总结
2015/07/16 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书