用JavaScript判断CSS浏览器类型前缀的两种方法
发布于 2017-04-09 20:56:56 | 115 次阅读 | 评论: 0 | 来源: 网友投递
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浏览器类型前缀，希望大家喜欢。
相关阅读:
用JavaScript判断CSS浏览器类型前缀的两种方法
JavaScript判断数组重复内容的两种方法(推荐)
JavaScript判断变量是否为undefined的两种写法区别
Javascript解决常见浏览器兼容问题的12种方法
JavaScript禁止用户多次提交的两种方法
JavaScript清空数组元素的两种方法简单比较
JavaScript访问字符串中单个字符的两种方法
js判断字符是否是汉字的两种方法小结
javascript自定义startWith()和endWith()的两种方法
javascript将ip地址第四段用星号代替的两种方法
利用JavaScript阻止表单提交的两种方法
JavaScript数值千分位格式化的两种简单实现方法
