一. element.setAttribute 與 element.className

我們通過Js腳本對DOM 節點進行修改其樣式class的時候，有幾種方式進行操作：

1.element.setAttribute（'className','xxxClass'）;//僅對IE有效

2.element.setAttribute（'class','xxxClass'）;//僅對FF有效

3.element.className = 'xxxClass';//兼容IE與FF

當然我們可以通過判斷瀏覽器來實現兼容如：

if(document.all)?{
????element.setAttrbute('className',?'xxxClass');
}?else?{
????element.setAttrbute('class',?'xxxClass');
}

?

?

推薦第3種寫法。

二.event事件

如果我們需要用到一個兼容IE和FF的JS事件，我們可以利用下面這段代碼，這在很多需要做事件處理的JS代碼中非常有用。

?

代碼 //格式化事件
function?getEvent(){
?????//同時兼容ie和ff的寫法
?????if(document.all)????return?window.event;
?????func=getEvent.caller;
?????while(func!=null){
?????????var?arg0=func.arguments[0];
?????????if(arg0){
?????????????if((arg0.constructor==Event?||?arg0.constructor?==MouseEvent)
????????????????||?(typeof(arg0)=="object"?&&?arg0.preventDefault?&&?arg0.stopPropagation)){
????????????????return?arg0;
??????????????}
?????????}
??????????func=func.caller;
????????}
????????return?null;
}

你可以用var event=getEvent();來獲得一個兼容IE與FF的事件，比如如下這段兼容IE與FF的拖拽代碼中可以用到它：

?

代碼 //拖拽
//對“拖動點”定義：onMousedown="StartDrag(this)"?onMouseup="StopDrag(this)"?onMousemove="Drag(this)"即可
var?move=false,_X,_Y;
function?StartDrag(obj,winId){??//定義準備拖拽的函數
????var?event=getEvent();
????//同時兼容ie和ff的寫法
????if?(!window.captureEvents)?{
????????obj.setCapture();?//對當前對象的鼠標動作進行跟蹤
????}else?{
????????window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
????}
????move=true;
????//獲取鼠標相對內容層坐標
????var?pos=jQuery('#'+winId).position();
????jQuery('#'+winId).fadeTo(0,0.8);

????_X=pos.left-event.clientX;
????_Y=pos.top-event.clientY;
}
function?DragWin(obj,winId){????????//定義拖拽函數
????var?event=getEvent();
????if(move){
????????var?parentwin=jQuery('#'+winId);
????????var?left_x;
????????var?top_y;
????????if(event.clientX+_X?<?0)?{
????????????left_x?=?0;
????????}?else?if?(event.clientX+_X?>?document.documentElement.clientWidth-$("#"+winId).width())?{
????????????left_x?=?document.documentElement.clientWidth-$("#"+winId).width();
????????}?else?{
????????????left_x?=?event.clientX+_X;
????????}
????????if(event.clientY+_Y?<?document.documentElement.scrollTop)?{
????????????top_y?=?document.documentElement.scrollTop;
????????}?else?if?(event.clientY+_Y?>?document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height())?{
????????????top_y?=?document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height();
????????}?else?{
????????????top_y?=?event.clientY+_Y;
????????}
????????parentwin.css("left",left_x);
????????parentwin.css("top",top_y);
????}
}
function?StopDrag(obj,winId){???//定義停止拖拽函數
????//同時兼容ie和ff的寫法
????if?(!window.captureEvents)?{
????????obj.releaseCapture();?//停止對當前對象的鼠標跟蹤
????}else?{
????????window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
????}
????jQuery('#'+winId).fadeTo(0,1);
????move=false;
}

?

?

?

先留篇文檔，便于更新記錄日常工作中解決的瀏覽器兼容問題。

轉載于:https://www.cnblogs.com/arix04/archive/2010/09/21/1832648.html

總結

以上是生活随笔為你收集整理的(原创)JS兼容性笔记(更新)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。