一驻呐、判斷瀏覽器內(nèi)核
在前端開發(fā)過程中碴犬，有時(shí)我們需要判斷瀏覽器的內(nèi)核前綴，對(duì)不同的瀏覽器做出不同的處理按傅，因此我們可以這么做捉超。
alert(element.style.webkitTransition); 這個(gè)是獲取以webkit為前綴的transition值胧卤。但如果不是webkit為前綴的瀏覽器，則會(huì)返回undefined拼岳。而我們可以將所有的內(nèi)核前綴給枚舉出來枝誊，然后獲取其某個(gè)CSS的值，即可做出判斷惜纸。代碼如下：
function getVendorPrefix() {
// 使用body是為了避免在還需要傳入元素
var body = document.body || document.documentElement,
style = body.style,
vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
i = 0;
console.log(style);
while (i < vendor.length) {
// 此處進(jìn)行判斷是否有對(duì)應(yīng)的內(nèi)核前綴
if (typeof style[vendor[i] + 'Transition'] === 'string') {
return vendor[i];
}
i++;
}
}
console.log(getVendorPrefix());
二叶撒、JS判斷瀏覽器是否支持某一個(gè)CSS3屬性的方法
1、引子
css3的出現(xiàn)讓瀏覽器的表現(xiàn)更加的豐富多彩耐版，表現(xiàn)沖擊最大的就是動(dòng)畫了祠够，在日常書寫動(dòng)畫的時(shí)候，很有必要去事先判斷瀏覽器是否支持粪牲，尤其是在寫CSS3動(dòng)畫庫的時(shí)候古瓤。比如transition的animation-play-state，就只有部分瀏覽器支持腺阳。
2落君、檢測(cè)方法
下面的方法可以使用腳本判斷瀏覽器是否支持某一個(gè)CSS3屬性：
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'));
