用JavaScript判斷CSS瀏覽器類型前綴的兩種方法

不管我們對瀏覽器類型前綴有多么的討厭,我們都不得不每天面對它 , 否者有些東西不能正常工作 。這些前綴的用法有兩種:在CSS里(例如“-moz-”)和在JS里 。有一個神奇的 X-Tag 項目里有一段很聰明的JavaScript腳本,可以用來判斷當前使用的是什么前綴——讓我來展示它是如何工作的!
比如 CSS 前綴,IE 的是 "-ms-",舊版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chrome 是 "-webkit-" 。JavaScript 有多種方式判斷它們 。
方法1: 特性判斷

用JavaScript判斷CSS瀏覽器類型前綴的兩種方法

通過創建一個div,給其分別添加 -webkit-、-moz-、-o-、-ms- 的前綴 css 樣式,然后獲取 style , 通過 style.xxxTransition 判斷是哪種前綴 。
方法2: getComputedStyle 獲取 documentElement 所有樣式再解析
先通過 window.getComputedStyle 獲取 styles,將 styles 轉成數組
用JavaScript判斷CSS瀏覽器類型前綴的兩種方法

Chrome arr 如下
用JavaScript判斷CSS瀏覽器類型前綴的兩種方法

用JavaScript判斷CSS瀏覽器類型前綴的兩種方法

能看到取到了具有各自瀏覽器自身實現的 CSS 前綴名稱 。
把所有屬性連接成一個字符串 , 然后用正則表達式匹配就能找出前綴了
用JavaScript判斷CSS瀏覽器類型前綴的兩種方法

我們看到 方法2 比 方法1 代碼量少了許多 。無論是方法1 和 方法2 ,都采用匿名函數一次性執行后返回結果,不需要每次判斷都調用一下函數 。
【用JavaScript判斷CSS瀏覽器類型前綴的兩種方法】以上內容就是小編通過兩種方法給大家介紹的用JavaScript判斷CSS瀏覽器類型前綴,希望大家喜歡 。

相關經驗推薦