javascript学习2 - 爱码网

希望把某个元素移除你的视线：
- display:none; 显示为无
- visibility:hidden; 隐藏
- width 或者 height
- 透明度
- left 或者 top
- 拿一个白色DIV盖住它
- margin负值
- ......
事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……
- onclick
- onmouseover
- onmouseout
- onmousedown
- onmouseup
- onmousemove 就像是鼠标抚摸一样的事件
- ...
- onload 加载完以后执行…
- window.onload = 事情
- img.onload
- body.onload
- ...
如何添加事件：
- 元素.onmouseover

函数：可以理解为-命令，做一些事~~

function abc(){ // 肯定不会主动执行的！
……
}
- 直接调用：abc();
- 事件调用：元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数

元素.事件 = function (){};

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
    li { list-style:none; }
    .lis { 
        width:80px;
        height:30px;
        border:1px solid #333;
        position:relative;
    }
    .lis a { 
        display:block;
        line-height:30px; 
        text-align:center;
        text-decoration:none;
        color:#000;
        background:#f1f1f1;
    }
    ul ul {
        padding:0;
        margin:0;
        width:140px; 
        border:1px solid #333; 
        position:absolute; 
        top:30px; 
        left:-1px; 
        background:#FF9; 
        display:none;
    }
    ul ul li {
        text-align:center;
        line-height:30px;
    }
</style>
</head>
<body>
<ul>
    <li id="lis" class="lis">
        <a id="link" href="#">微博</a>
        <ul id="ul1">
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
  </li>
</ul>

<script>
    window.onload=function(){
        var li = document.getElementById('lis');
        var ul = document.getElementById('ul1');
        var a = document.getElementById('link');
        
        li.onmouseover = show;
        li.onmouseout = hide;
        
        function show(){
            ul.style.display = 'block';
            a.style.background = 'yellow';
        }
        
        function hide(){
            ul.style.display = 'none';
            a.style.background = '#f1f1f1';
        }
    }
</script>
</body>
</html>

View Code