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

来源：互联网发布：广联达钢筋抽样软件编辑：程序博客网时间：2024/05/18 01:22

//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.onload=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(){ 
 varbtn = document.getElementById("yuanEvent");
 //addEventListener：绑定函数
 btn.addEventListener("click",eventOne);
 btn.addEventListener("click",eventTwo);
}

close监听

1
2
3
4
5
6
7
8
9
10
11
12
var eventOne = function(){
 alert("第一个监听事件");
} 
function eventTwo(){ 
 alert("第二个监听事件");
} 
window.onload = function(){ 
 varbtn = 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">
   functionaddEventHandler(target,type,func){ 
    if(target.addEventListener){
     //监听IE9，谷歌和火狐
     target.addEventListener(type, func,false); 
    }elseif(target.attachEvent){ 
     target.attachEvent("on"+ type, func); 
    }else{
     target["on"+ type] = func; 
    }
   }
   functionremoveEventHandler(target, type, func) { 
    if(target.removeEventListener){ 
     //监听IE9，谷歌和火狐
     target.removeEventListener(type, func,false); 
    }else if (target.detachEvent){ 
     target.detachEvent("on"+ type, func); 
    }else{ 
     deletetarget["on" + type]; 
    }
   }
   vareventOne = function(){
    alert("第一个监听事件");
   }
   functioneventTwo(){ 
    alert("第二个监听事件");
   }
   window.onload =function(){ 
    varbindEventBtn = 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>

阅读全文

0 0