HTML code
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Jstest</title><Linkrel= "stylesheet"type= "Text/css"href= "Style.css"/><Scripttype= "Text/javascript"src= "Js.js"></Script></Head><Body> <DivID= "box"class= "Red">Test Div</Div> </Body></HTML>
CSS Code
@charset "Utf-8";. Red{width:100px; height:100px; background:#f00;} . Blue {width:100px; height:100px; background: blue;}
JS Code
//adding events across browsersfunctionaddevent (OBJ,TYPE,FN) {if(Obj.addeventlistener) {Obj.addeventlistener (TYPE,FN,false); }Else if(obj.attachevent) {obj.attachevent (' On ' +TYPE,FA); }}//removing events across browsersfunctionremoveevent (OBJ,TYPE,FN) {if(Obj.removeeventlistener) {Obj.removeeventlistener (OBJ,FN,false); }Else if(obj.detachevent) {Obj.detach (' On ' +TYPE,FN); }}//get target objects across browsersfunctionGettarget (evt) {if(Evt.target) {// the returnEvt.target; }Else if(window.event.srcElement) {returnwindow.event.srcElement; }}addevent (window,' Load ',function(){ varbox = document.getElementById (' box '); addevent (Box,' Click ', Toblue);});functiontored (evt) {varthat =Gettarget (EVT); That.classname= ' Red '; Removeevent (That,' Click ', tored); Addevent (That,' Click ', Toblue);}functionToblue (evt) {varthat =Gettarget (EVT); That.classname= ' Blue '; Removeevent (That,' Click ', Toblue); Addevent (That,' Click ', tored);}
Event switcher for JavaScript event objects