js拿到标签所有样式 js事件监听兼容ie

最新推荐文章于 2023-02-21 19:42:42 发布

个人看法

最新推荐文章于 2023-02-21 19:42:42 发布

阅读量736

点赞数

//js拿到标签所有样式
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js用currentStyle和getComputedStyle获取css样式</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
window.οnlοad=function()
{
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'))
}
</script>
</head>
<body>
<div id="div1"></div>
</body>

</html>

http://www.jb51.net/article/67051.html

open监听

 
  var 
   eventOne =  
  function 
  (){  
 
  document.getElementById("one").innerHTML=('第一个监听事件');
  
   // 
  alert( 
  "第一个监听事件" 
  );  
 
  }  
 
  function 
   eventTwo(){  
 
   // 
  alert( 
  "第二个监听事件" 
  );  
 
  document.getElementById("two").innerHTML=('第二个监听事件'); 
 
  }  
 
  window.onload =  
  function 
  (){  
 
  var 
  btn = document.getElementById( 
  "yuanEvent" 
  );  
 
  //addEventListener：绑定函数  
 
  btn.addEventListener( 
  "click" 
  ,eventOne);  
 
  btn.addEventListener( 
  "click" 
  ,eventTwo);  
 
  }

close监听

 
        var 
         eventOne =  
        function 
        (){  
       
        alert( 
        "第一个监听事件" 
        );  
       
        }  
       
        function 
         eventTwo(){  
       
        alert( 
        "第二个监听事件" 
        );  
       
        }  
       
        window.onload =  
        function 
        (){  
       
        var 
        btn = document.getElementById( 
        "yuanEvent" 
        );  
       
        btn.addEventListener( 
        "click" 
        ,eventOne);  
       
        btn.addEventListener( 
        "click" 
        ,eventTwo);  
       
        btn.removeEventListener("click",eventOne);  
       
        }

兼容

 
      <!DOCTYPE html>  
     
      <html>  
     
      <head>  
     
      <meta http-equiv= 
      "Content-Type" 
      content= 
      "text/html; charset=UTF-8" 
      >  
     
      <title>Event</title>  
     
      <script type= 
      "text/javascript" 
      >  
     
      function 
      addEventHandler(target,type,func){  
     
      if 
      (target.addEventListener){  
     
      //监听IE9，谷歌和火狐  
     
      target.addEventListener(type, func,  
      false 
      );  
     
      } 
      else 
      if 
      (target.attachEvent){  
     
      target.attachEvent( 
      "on" 
      + type, func);  
     
      } 
      else 
      {  
     
      target[ 
      "on" 
      + type] = func;  
     
      }  
     
      }  
     
      function 
      removeEventHandler(target, type, func) {  
     
      if 
      (target.removeEventListener){  
     
      //监听IE9，谷歌和火狐  
     
      target.removeEventListener(type, func,  
      false 
      );  
     
      }  
      else 
      if 
       (target.detachEvent){  
     
      target.detachEvent( 
      "on" 
      + type, func);  
     
      } 
      else 
      {  
     
      delete 
      target[ 
      "on" 
       + type];  
     
      }  
     
      }  
     
      var 
      eventOne =  
      function 
      (){  
     
      alert( 
      "第一个监听事件" 
      );  
     
      }  
     
      function 
      eventTwo(){  
     
      alert( 
      "第二个监听事件" 
      );  
     
      }  
     
      window.onload =  
      function 
      (){  
     
      var 
      bindEventBtn = document.getElementById( 
      "bindEvent" 
      );  
     
      //监听eventOne事件  
     
      addEventHandler(bindEventBtn, 
      "click" 
      ,eventOne);  
     
      //监听eventTwo事件  
     
      addEventHandler(bindEventBtn, 
      "click" 
      ,eventTwo );  
     
      //监听本身的事件  
     
      addEventHandler(bindEventBtn, 
      "click" 
      , 
      function 
      (){  
     
      alert( 
      "第三个监听事件" 
      );  
     
      });  
     
      //取消第一个监听事件  
     
      removeEventHandler(bindEventBtn, 
      "click" 
      ,eventOne);  
     
      //取消第二个监听事件  
     
      removeEventHandler(bindEventBtn, 
      "click" 
      ,eventTwo);  
     
      }  
     
      </script>  
     
      </head>  
     
      <body>  
     
      <input type= 
      "button" 
      value= 
      "测试" 
       id= 
      "bindEvent" 
      >  
     
      <input type= 
      "button" 
      value= 
      "测试2" 
       id= 
      "yuanEvent" 
      >  
     
      </body>  
     
      </html>