確定有人會說,添加類名能夠用obj.classList.add
呀,是的,這沒有錯。但我也說了,這些我積累的函數都是兼容性極佳的方式,也就是說,無論是 ie 的多低版本,也是沒多大問題的,並且這些本身實現的功能確實對初學者幫助很多。chrome
function addClass(ele, className){ var reg = new RegExp("\\b"+className+"\\b"); if(!reg.test(ele.className)){ /* 若是元素 ele 不包含 className */ ele.className += " "+className; }; }; function removeClass(ele, className){ if(ele.className){ var reg = new RegExp("\\b"+className+"\\b"); var classes = ele.className; ele.className = classes.replace(reg, ""); if(/^\s*$/g.test(ele.className)){ ele.removeAttribute("class"); }; }else{ ele.removeAttribute("class"); } };
2.滾輪事件函數
滾輪事件也是 PC 端主流網站必須實現的功能,一般咱們會配合咱們本身寫的滾動條禁止掉系統的滾動條來使用。可是,滾輪事件跟咱們想象的略有不一樣,它是 firefox 一種綁定,反而 ie 和 chrome 是同樣的。網站
window.onload = function () {firefox
//ie/chrome document.onmousewheel = function(event){ scrollMove(event,callback) } //firefox if(document.addEventListener){ document.addEventListener('DOMMouseScroll',function(event){ scrollMove(event,callback) }); } function scrollMove(event,callback) { event = event || window.event; var flag = ''; if(event.wheelDelta){ //ie/chrome if(event.wheelDelta > 0){ //上 flag = 'up'; }else { //下 flag = 'down' } }else if(event.detail){ //firefox if(event.detail < 0){ //上 flag = 'up'; }else { //下 flag = 'down' } } switch (flag){ case 'up': if (callback && callback['wheelUp'] == 'function') { callback.wheelUp() } break; case 'down': break; } //取消默認行爲 event.preventDefault && event.preventDefault(); return false; } };
未完待續 , 有時間就更新