第一天总结的是一些HTML DOM 事宜中的鼠标事宜
<!–more–>

js事宜中重要的都是对款式的显现隐蔽，display:none or display:block

其中最简朴的就是运用onclick事宜对属性举行显现隐蔽或许转变class属性

demo1

alert() 要领用于显现带有一条指定音讯和一个 OK 按钮的正告框。

语法

alert(message)

要在 window 上弹出的对话框中显现的纯文本（而非 HTML 文本）

    <input type="button" value="按钮" onclick="alert('我是一个音讯框')">

demo2

鼠标移入移出显现隐蔽div块

<input type="checkbox" 
onmousemove="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<div id="div1" class="dsn">显现隐蔽div块</div>

更多的鼠标事宜

参照菜鸟教程

demo3

运用函数简朴的对元素举行显现隐蔽

    <script>
    function showHide()
    {
        var oDiv=document.getElementById('div2');
        
        if(oDiv.style.display=='block')
        {
            oDiv.style.display='none';
        }
        else
        {
            oDiv.style.display='block';
        }
    }
    </script>

    <input type="button" value="显现隐蔽" onclick="showHide()" />
    <div id="div2"></div>

demo4

运用函数转变元素css属性值

        <script>
        function toGreen()
        {
            var oDiv=document.getElementById('div3');
            
            oDiv.style.width='300px';
            oDiv.style.height='300px';
            oDiv.style.background='green';
        }

        function toRed()
        {
            var oDiv=document.getElementById('div3');
            
            oDiv.style.width='200px';
            oDiv.style.height='200px';
            oDiv.style.background='red';
        }
    </script>

        <div id="div3" onmouseover="toGreen()" onmouseout="toRed()"></div>

demo5

简朴的对网页的换肤功用
要在最前面的body中到场id="changebg"

    <script>
    function changebgred(){
        var oL=document.getElementById('changebg');
        oL.style.background='red'
    }
    function changebggreen(){
        var oL=document.getElementById('changebg');
        oL.style.background='green'
    }
    </script>

    <a onclick="changebgred()" class="bon">赤色</a>
    <a onclick="changebggreen()" class="bon">绿色</a>

demo6

className的运用

    <style>
        #div5 {
            width: 100px;
            height: 100px;
            border: 1px solid #000
        }
        
        .box {
            background: red;
        }
        
        .box2 {
            background: #fff;
        }
    </style>

<script>
function toRe(){
    var oY=document.getElementById('div5')
    oY.className='box';
}
function toBa(){
    var oY=document.getElementById('div5')
    oY.className='box2';
}
</script>

    <input type="button" value="变红" onclick="toRe()" />
    <input type="button" value="变白" onclick="toBa()" />
    <div id="div5">

源码检察
检察博客