源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-02-01 07:19 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用JavaScript判断CSS浏览器类型前缀的两种方法
不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在CSS里(例如“-moz-”)和在JS里。有一个神奇的 X-Tag 项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的! 比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chrome 是 "-webkit-"。JavaScript 有多种方式判断它们。 [b]方法1: 特性判断[/b]
// 取浏览器的 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 如下 [img]http://files.jb51.net/file_images/article/201510/201510080902331.png[/img] Chrome arr 如下 [img]http://files.jb51.net/file_images/article/201510/201510080902332.png[/img] 能看到取到了具有各自浏览器自身实现的 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浏览器类型前缀,希望大家喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部