这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
不管浏览器更新的多快,号称多么支持标准。厂商不同,他们之间还是有很多差异。我们需要区分出这些差异,针对不同的浏览器做不同的处理。
不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在 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 如下
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.phperz.com/article/17/0409/269206.html