<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="height:4000px">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
button{
width:100px;
display: block;
margin:0 auto;
}
#menu{
width:100px;
margin:0 auto;
overflow: hidden;
clear: both;
display:none;
border:1px solid blue;
}
#menu li{
height: 30px;
line-height: 30px;
}
#menu li#close{
border-top: 1px solid blue;
}
</style>
<button>输入法</button>
<ul id="menu">
<li>手写</li>
<li>拼音</li>
<li id="close">关闭</li>
</ul>
<script>
// get element
var oBtn = document.getElementsByTagName('button')[0];
var oMenu = document.getElementById('menu');
var oClosed = document.getElementById('close');
// public funciton eventEventlist
var eventUil = {
addHandler : function(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent("on"+type,fn);
}else{
obj["on"+type] = fn;
}
},
removeHandler : function(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent("on"+type,fn);
}else{
obj["on"+type] = null;
}
}
}
// funciton about menu display or not
function handler(){
if(oMenu.style.display === "none"){
oMenu.style.display = "block";
}else{
oMenu.style.display = "none";
}
}
// function about if you hit the close
function closeMenu(){
oMenu.style.display = "none";
}
// call addEventlistener
eventUil.addHandler(oBtn,"click", handler)
eventUil.addHandler(oClosed,"click",closeMenu)
</script>
</body>
</html>
ele.style
获取到的对象必须是内联申明的样式属性如果要在获取在css文件中定义的属性则需要调用
来获取,设定第二参数值可以获取伪元素的样式。
IE下的API是: