时间:2021-05-18
不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在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浏览器类型前缀,希望大家喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一
PHP简单判断当前使用的是什么浏览器,判断浏览器类型的方法,方便统计网站访问用户使用浏览器的比例。判断浏览器类型方法一functionuserBrowser()
本文使用两种方法实现在PB中启动浏览器的方法。第一种方法://打开浏览器stringurlinetiinet_baseurl="http://pbsite.ye
用UC浏览器有时候不想要浏览器的浏览记录保存下来,那么我们应该怎样删除呢?分别有两种方法可以使用,小编一一解释。软件名称:UC浏览器V13.1.3.1093fo
css给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之前的线性过度,这个css3属性只支持高版本的浏览器。//浏览器前缀background: