Javascript 跨瀏覽器事件

前一段時間的javascript中的一些東西忘的差很少了,回顧了些許,發現有些東西頗有價值須要記錄,主要就是關於css和跨瀏覽器(IE)的問題。
Dom操做css
沒什麼新奇的,有兩個地方須要特別說明,行內的css和外部或者內部css樣式修改區別。
外部或者內部樣式表只能得到查看,不能修改。能修改的只是行內樣式表,意思是若是要修改css,那也只是改變的行內樣式表。
獲取行內樣式,修改。
document.getElementById("btn").onclick=function(){
var div = document.getElementById("div");
div.style.height="300px";
div.style.width="200px";
}
直接拿到相應的元素直接 .style.屬性 就能直接拿到屬性了javascript


獲取內部或外部樣式表css


if(document.defaultView){ //非 IE 
var style = document.defaultView.getComputerStyle(Element,attr);
  return style;
}else if(div.currentStyle){ //IE
  return currentStyle;
}java


Element是要被獲取樣式表的元素,attr是其屬性。
非IE下直接返回樣式表,IE下也返回當前樣式表,要查看屬性的話也是直接 
(元素.currentStyle.屬性) 但都不可更改。瀏覽器

還有就是事件,基本的就不寫的。跨瀏覽器事件,仍是比較有用的對IE用戶來講。函數

//跨瀏覽器工具對象工具


var EventUtil = {
/*
* 給元素添加事件處理程序的方法
* element : 須要添加事件處理程序的元素
* type : 元素的事件類型
* handler : 當事件觸發時調用的函數
*/
addHandler : function(element, type, handler){
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }else if(element.attachEvent){
    element.attachEvent("on" + type, handler);
  }else{
    element["on" + type] = handler;
  }
},
/*
* 給元素刪除事件處理程序的方法
* element : 須要刪除事件處理程序的元素
* type : 元素的事件類型
* handler : 當事件觸發時調用的函數
*/
   removeHandler : function(element, type, handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
     }else if(element.detachEvent){
      element.detachEvent("on" + type, handler);
    }
},
/*
* 得到事件對象
*/
  getEvent : function(event){
    return event ? event : window.event;
  },
/*
* 得到事件對象的目標元素
*/
  getTarget : function(event){
    return event.target ? event.target : event.srcElement
  },
/*
* 取消事件的默認行爲
*/
  preventDefault : function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else if(event.returnValue){
      event.returnValue = false;
    }
},
/*
* 中止事件的傳播
*/
  stopPropagation : function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else if(event.cancelBubble){
      event.cancelBubble = true;
    }
},
/*
* 獲取元素某個屬性的樣式的值
* element : 須要獲取樣式的元素
* attr : 須要獲取值的屬性名稱
*/
  getCss : function(element,attr){
    if(document.defaultView){
      var elementStyle = document.defaultView.getComputedStyle(element,null);
    return elementStyle[attr];
      }else if(element.currentStyle){
    return element.currentStyle[attr];
        }
  }
}對象

相關文章
相關標籤/搜索