JS判斷瀏覽器是否支持某一個CSS3屬性的方法
更新時(shí)間：2014年10月17日 16:47:58 投稿：whsnow
css3表現(xiàn)沖擊最大的就是動畫了，因此很有必要去事先判斷瀏覽器是否支持，寫CSS3動畫庫就只有部分瀏覽器支持
1、引子
css3的出現(xiàn)讓瀏覽器的表現(xiàn)更加的豐富多彩，表現(xiàn)沖擊最大的就是動畫了，在日常書寫動畫的時(shí)候，很有必要去事先判斷瀏覽器是否支持，尤其是在寫CSS3動畫庫的時(shí)候。比如transition的animation-play-state，就只有部分瀏覽器支持。
2、檢測方法
下面的方法可以使用腳本判斷瀏覽器是否支持某一個CSS3屬性：
/**
* 判斷瀏覽器是否支持某一個CSS3屬性
* @param {String} 屬性名稱
* @return {Boolean} true/false
* @version 1.0
* @author ydr.me
* 2014年4月4日14:47:19
*/
function supportCss3(style) {
var prefix = ['webkit', 'Moz', 'ms', 'o'],
i,
humpString = [],
htmlStyle = document.documentElement.style,
_toHumb = function (string) {
return string.replace(/-(\w)/g, function ($0, $1) {
return $1.toUpperCase();
});
};
for (i in prefix)
humpString.push(_toHumb(prefix[i] + '-' + style));
humpString.push(_toHumb(style));
for (i in humpString)
if (humpString[i] in htmlStyle) return true;
return false;
}
3、使用方法
alert(supportCss3('animation-play-state'));
相關(guān)文章
這篇文章主要給大家介紹了如何通過一篇文章快速從零快速上手Rollup的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個需求,需要顯示溫濕度,網(wǎng)上找了一圈沒找到解決方法,所以只能自己寫一個,這篇文章主要給大家介紹了關(guān)于如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度的相關(guān)資料,需要的朋友可以參考下2022-03-03
js全屏事件fullscreenchange 實(shí)現(xiàn)全屏、退出全屏操作
這篇文章主要為大家詳細(xì)介紹了js全屏事件fullscreenchange，實(shí)現(xiàn)全屏、退出全屏操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript DOM 學(xué)習(xí)總結(jié)(五)
當(dāng)頁面加載時(shí)，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。文檔對象模型定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，本篇文章給大家介紹javascript dom 學(xué)習(xí)總結(jié)(五)，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中純函數(shù)的函數(shù)依賴、所指透明等概念相關(guān)原理及使用技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了詳細(xì)教你微信公眾號正文頁SVG交互開發(fā)技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要給大家介紹了關(guān)于ES6小技巧之代替lodash的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了two.js之實(shí)現(xiàn)動畫效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
從我們接觸前端開始，每個項(xiàng)目的根目錄下一般都會有一個package.json文件，這個文件定義了當(dāng)前項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息，本文就詳細(xì)的來介紹一下2021-07-07
檢測一個函數(shù)是否是JavaScript原生函數(shù)的小技巧
這篇文章主要介紹了檢測一個函數(shù)是否是JavaScript原生函數(shù)的小技巧,本文給出了兩種檢測方法,需要的朋友可以參考下2015-03-03