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

最新推荐文章于 2022-10-07 13:31:16 发布

转载最新推荐文章于 2022-10-07 13:31:16 发布 · 787 阅读

//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>