一、判斷瀏覽器內核
在前端開發過程中,有時我們需要判斷瀏覽器的內核前綴,對不同的瀏覽器做出不同的處理,因此我們可以這么做。
alert(element.style.webkitTransition); 這個是獲取以webkit為前綴的transition值。但如果不是webkit為前綴的瀏覽器,則會返回undefined。而我們可以將所有的內核前綴給枚舉出來,然后獲取其某個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) {
// 此處進行判斷是否有對應的內核前綴
if (typeof style[vendor[i] + 'Transition'] === 'string') {
return vendor[i];
}
i++;
}
}
console.log(getVendorPrefix());
二、JS判斷瀏覽器是否支持某一個CSS3屬性的方法
1、引子
css3的出現讓瀏覽器的表現更加的豐富多彩,表現沖擊最大的就是動畫了,在日常書寫動畫的時候,很有必要去事先判斷瀏覽器是否支持,尤其是在寫CSS3動畫庫的時候。比如transition的animation-play-state,就只有部分瀏覽器支持。
2、檢測方法
下面的方法可以使用腳本判斷瀏覽器是否支持某一個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'));