大家應該還記得JavaScript行內樣式怎麼寫吧?(看來我是廢話了!)
在前端開發過程中,有時我們需要判斷浏覽器的內核前綴,對不同的浏覽器做出不同的處理,因此我們可以這麼做。
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; while (i < vendor.length) { // 此處進行判斷是否有對應的內核前綴 if (typeof style[vendor[i] + 'Transition'] === 'string') { return vendor[i]; } i++; } }
然後只需要調用getVendorPrefix()即可知道浏覽器的內核前綴,如果返回undefined則證明浏覽器不支持CSS3屬性,即沒有內核前綴。
大家應該知道,我們在寫代碼的過程中,能寫CSS就不寫JavaScritp,畢竟CSS的性能會比自己寫JS的高一些,因此,我們在開發一些實際應該中,會用到transition,比如一個簡單的圖片輪播,我們可以使用CSS3的transition,也可以使用jQuery的animate或自己寫原生,但CSS3的性能肯定會高一些,因此我們可以寫兩套代碼,對於支持CSS3的浏覽器則使用animation,而不支持的則使用計時器或animate。這樣的話能夠獲取更好的用戶體驗。
以上是看jquery.slides.js的插件心得,如有更好的方法,請一定告知筆者。