JavaScript快速檢測瀏覽器對CSS3特性的支持情況
更新時間：2012年09月26日 19:05:01 作者：
在項目中需要快速檢測瀏覽器是否支持某CSS3特性，比如檢測是否支持“transform”，然后我的布局會有兩種完全不同的版式
在項目中需要快速檢測瀏覽器是否支持某CSS3特性，比如檢測是否支持“transform”，然后我的布局會有兩種完全不同的版式。
當(dāng)然除開本文介紹的這種快速方法，還有一種更有名和更通用的方法，那就是modernizr，運行腳本之后它會在html的class上加上瀏覽器支持的所有特性的列表。
優(yōu)點：
js是可配置的，不需要的特性檢測可以在配置腳本中去掉基于特性檢測js庫簡單好用
除此之外還有一種不太好的方法，那就是判斷瀏覽器的UA，不好的原因是UA可能會偽造，而且版本判斷繁瑣，還有不穩(wěn)定。
優(yōu)點：性能可能是最優(yōu)的
最后就是本文介紹的這個方法，我寫了一個函數(shù)快速檢測是否瀏覽器支持某CSS特性，適合的場景是快速需要知道瀏覽器是否支持某一個CSS特性（而不是好幾個）。
優(yōu)點：
性能不錯通用性強適合檢測單個CSS特性復(fù)制代碼 代碼如下:
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
if ('-ms-' + prop in div.style) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
return true;
}
}
return false;
};
})();
if ( supports('textShadow') ) {
document.documentElement.className += ' textShadow';
}
這就是最終代碼，原理是：
1.創(chuàng)建一個div，然后可以獲得div.style，這是它所支持的屬性的數(shù)組列表。
2.檢查text是否包含在數(shù)組中，如果是，直接返回true。
3.檢查各種前綴，比如Webkit加上text，即webkitTransition，如果包含在style中，返回true。
4.值得注意的是在CSS中屬性名為：-webkit-transition，但是在DOM的style中 ，卻是對應(yīng)webkitTransition。我也不知道為什么會這樣。
相關(guān)文章
這幾天不是很忙，就找了些拖動布局方面的資料看看，也學(xué)著寫了個拖動布局的效果，沒想到花了好多時間，七拼八湊，總算是把這個效果寫出來了。2010-10-10
javascript 中關(guān)于array的常用方法詳解
這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了編程語言JavaScript簡介,本文講解了JavaScript是什么、JavaScript特點、JavaScript和Java的區(qū)別等內(nèi)容,需要的朋友可以參考下2014-10-10
這篇文章主要給大家介紹了關(guān)于js兩個數(shù)組合并去重的相關(guān)資料,日常開發(fā)中經(jīng)常會用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下2023-09-09
JavaScript 保護(hù)變量不被隨意修改的實現(xiàn)代碼
本文通過實例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實現(xiàn)方法，需要的朋友參考下吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了小程序清理本地緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
webpack5的loader配置小白學(xué)習(xí)篇
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
ajax現(xiàn)在是一種非常流行的技術(shù)，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來使用純javascript實現(xiàn)獲取服務(wù)器端的功能來展示如何使用純javascript實現(xiàn)ajax功能，以弄清其原理.2017-11-11
這篇文章主要介紹了JavaScript事件,告訴大家"事件對象"的注意要點，感興趣的小伙伴們可以參考一下2016-01-01