JS判斷瀏覽器是否支持某一個(gè)CSS3屬性的方法
1、引子
css3的出現(xiàn)讓瀏覽器的表現(xiàn)更加的豐富多彩,表現(xiàn)沖擊最大的就是動(dòng)畫(huà)了,在日常書(shū)寫(xiě)動(dòng)畫(huà)的時(shí)候,很有必要去事先判斷瀏覽器是否支持,尤其是在寫(xiě)CSS3動(dòng)畫(huà)庫(kù)的時(shí)候。比如transition的animation-play-state,就只有部分瀏覽器支持。
2、檢測(cè)方法
下面的方法可以使用腳本判斷瀏覽器是否支持某一個(gè)CSS3屬性:
/** * 判斷瀏覽器是否支持某一個(gè)CSS3屬性 * @param {String} 屬性名稱(chēng) * @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'));
- 利用CSS3新特性創(chuàng)建透明邊框三角
- JavaScript快速檢測(cè)瀏覽器對(duì)CSS3特性的支持情況
- CSS3中Transition屬性詳解以及示例分享
- 使用CSS3的scale實(shí)現(xiàn)網(wǎng)頁(yè)整體縮放
- CSS3,HTML5和jQuery搜索框集錦
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- jQuery Animation實(shí)現(xiàn)CSS3動(dòng)畫(huà)示例介紹
- css3元素簡(jiǎn)單的閃爍效果實(shí)現(xiàn)(html5 jquery)
- CSS3的核心特性和應(yīng)用場(chǎng)景
相關(guān)文章
js調(diào)用后臺(tái)servlet方法實(shí)例
今天做歷史記錄查詢(xún)功能,遇到了前后臺(tái)方法互相調(diào)用的問(wèn)題,研究了一下,把成功經(jīng)驗(yàn)記錄一二。2013-06-06基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【三】下拉列表Select2插件的使用
本文主要給大家介紹在編輯頁(yè)面中常用到的控件Select2,這個(gè)控件可以更加豐富傳統(tǒng)的Select下拉列表控件,提供更多的功能和更好的用戶(hù)體驗(yàn),2016-05-05JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本(推薦)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11JavaScript 開(kāi)發(fā)中規(guī)范性的一點(diǎn)感想
在開(kāi)發(fā)中通用的幾個(gè)方法,我們把它們放到utility目錄下或者utility.js中;所有的提示信息和報(bào)錯(cuò)信息統(tǒng)一放置在一起??雌饋?lái)都是小小的幾步,卻能讓咱們開(kāi)發(fā)的代碼同事讀起來(lái)更順暢,下個(gè)項(xiàng)目中也能用上。2009-06-06對(duì)google個(gè)性主頁(yè)的拖拽效果的js的完整注釋[轉(zhuǎn)]
對(duì)google個(gè)性主頁(yè)的拖拽效果的js的完整注釋[轉(zhuǎn)]...2007-04-04javascript伸縮菜單欄實(shí)現(xiàn)代碼分享
這篇文章主要介紹了javascript伸縮菜單欄實(shí)現(xiàn)代碼,點(diǎn)擊標(biāo)題顯示下級(jí)菜單,節(jié)約了空間,使頁(yè)面排版更加緊湊,感興趣的小伙伴們可以參考一下2015-11-11原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JS監(jiān)聽(tīng)組合按鍵思路及實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了JS監(jiān)聽(tīng)組合按鍵思路及實(shí)現(xiàn)過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04