用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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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设计模式之工厂模式实例总结
2017/09/01 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
vue.js表格分页示例
2016/10/18 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
bootstrap table实例详解
2017/01/06 Javascript
js实现随机点名小功能
2017/08/17 Javascript
JSON 数据格式详解
2017/09/13 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python简单的函数定义和用法实例
2015/05/07 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python3处理HTTP请求的实例
2018/05/10 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
大一新生检讨书
2014/10/29 职场文书
基层工作经验证明样本
2014/11/16 职场文书
人与自然观后感
2015/06/16 职场文书
高中同学会致辞
2015/08/01 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers