用JavaScript判斷CSS瀏覽器類型前綴的兩種方法
不管我們對瀏覽器類型前綴有多么的討厭，我們都不得不每天面對它，否者有些東西不能正常工作。這些前綴的用法有兩種：在CSS里(例如“-moz-”)和在JS里。有一個神奇的 X-Tag 項目里有一段很聰明的JavaScript腳本，可以用來判斷當前使用的是什么前綴——讓我來展示它是如何工作的！
比如 CSS 前綴，IE 的是 "-ms-"，舊版 Opera 的是 "-o-"，F(xiàn)irefox 的是 "-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 '';
}();
通過創(chuàng)建一個div，給其分別添加 -webkit-、-moz-、-o-、-ms- 的前綴 css 樣式，然后獲取 style，通過 style.xxxTransition 判斷是哪種前綴。
方法2： getComputedStyle 獲取 documentElement 所有樣式再解析
先通過 window.getComputedStyle 獲取 styles，將 styles 轉(zhuǎn)成數(shù)組
var styles = window.getComputedStyle(document.documentElement, ''); var arr = [].slice.call(styles); console.log(arr);
Firefox arr 如下
Chrome arr 如下
能看到取到了具有各自瀏覽器自身實現(xiàn)的 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 ，都采用匿名函數(shù)一次性執(zhí)行后返回結(jié)果，不需要每次判斷都調(diào)用一下函數(shù)。
以上內(nèi)容就是小編通過兩種方法給大家介紹的用JavaScript判斷CSS瀏覽器類型前綴，希望大家喜歡。
相關(guān)文章
javascript實現(xiàn) 百度翻譯 可折疊的分享按鈕列表
這篇文章主要介紹了javascript實現(xiàn) 百度翻譯 可折疊的分享按鈕列表的方法,需要的朋友可以參考下2015-03-03
網(wǎng)絡之美 JavaScript中Get和Set訪問器的實現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了，對于從事Web開發(fā)的朋友們來說真是個好消息啊，希望將來有一天各個瀏覽器都能遵循統(tǒng)一的標準。今天要和大家分享的是JavaScript中的Get和Set訪問器，和C#中的訪問器非常相似。2010-09-09
這篇文章主要為大家詳細介紹了Javascript事件驅(qū)動編程的相關(guān)資料,通過經(jīng)典案例向大家介紹Javascript事件驅(qū)動編程，需要的朋友可以參考下2016-01-01
innerHTML在Mozilla Firefox和Opera下執(zhí)行的一個特例情況。
innerHTML在Mozilla Firefox和Opera下執(zhí)行的一個特例情況。...2007-01-01
JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總
在網(wǎng)上有很多關(guān)于判斷圖片是否已經(jīng)加載完畢的文章，但是有的瀏覽器并不適合，下面小編給大家分享一些有關(guān)JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總，需要的朋友參考下2016-02-02
這篇文章主要介紹了javascript實現(xiàn)仿騰訊游戲選擇，簡單實現(xiàn)的下拉菜單二級聯(lián)動效果，十分不錯，有需要的小伙伴可以參考下。2015-05-05
用js判斷一個元素是否為另一個元素的子元素，再做一些效果的時候經(jīng)常用到，特別是和鼠標事件相關(guān)的應用中，比如一個浮層，在鼠標操作浮層內(nèi)元素的時候浮層顯示，當點擊浮層外的元素的時候隱藏浮層2012-03-03
使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個前端框架已被許多人接受并應用在不同的項目中，其中“開發(fā)高效，設(shè)備兼容”的特點表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了JavaScript Ajax實現(xiàn)異步通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript前后端數(shù)據(jù)交互工具ajax使用教程
Ajax（Asynchronous?Javascript?And?XML），即是異步的JavaScript和XML，Ajax其實就是瀏覽器與服務器之間的一種異步通信方式2022-10-10