大家應(yīng)該還記得JavaScript行內(nèi)樣式怎么寫吧？（看來我是廢話了！）
在前端開發(fā)過程中，有時我們需要判斷瀏覽器的內(nèi)核前綴，對不同的瀏覽器做出不同的處理，因此我們可以這么做。
alert(element.style.webkitTransition); 這個是獲取以webkit為前綴的transition值。但如果不是webkit為前綴的瀏覽器，則會返回undefined。而我們可以將所有的內(nèi)核前綴給枚舉出來，然后獲取其某個CSS的值，即可做出判斷。代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function getVendorPrefix() { // 使用body是為了避免在還需要傳入元素 var body = document.body || document.documentElement, style = body.style, vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'], i = 0; while (i < vendor.length) { // 此處進(jìn)行判斷是否有對應(yīng)的內(nèi)核前綴 if (typeof style[vendor[i] + 'Transition'] === 'string') { return vendor[i]; } i++; }} |
然后只需要調(diào)用getVendorPrefix()即可知道瀏覽器的內(nèi)核前綴，如果返回undefined則證明瀏覽器不支持CSS3屬性，即沒有內(nèi)核前綴。
大家應(yīng)該知道，我們在寫代碼的過程中，能寫CSS就不寫JavaScritp，畢竟CSS的性能會比自己寫JS的高一些，因此，我們在開發(fā)一些實際應(yīng)該中，會用到transition，比如一個簡單的圖片輪播，我們可以使用CSS3的transition，也可以使用jQuery的animate或自己寫原生，但CSS3的性能肯定會高一些，因此我們可以寫兩套代碼，對于支持CSS3的瀏覽器則使用animation，而不支持的則使用計時器或animate。這樣的話能夠獲取更好的用戶體驗。
以上是看jquery.slides.js的插件心得，如有更好的方法，請一定告知筆者。
