码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript判断各浏览器CSS前缀的两种方式

时间:2015-10-02 16:03:57      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

不管浏览器更新的多快,号称多么支持标准。厂商不同,他们之间还是有很多差异。我们需要区分出这些差异,针对不同的浏览器做不同的处理。

比如 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 如下

技术分享

Chrome arr 如下

技术分享

能看到取到了具有各自浏览器自身实现的 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前缀的两种方式

标签:

原文地址:http://www.cnblogs.com/snandy/p/4848567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!