2018-07-15

DOM中的函数

onclick点击事件
onmousever鼠标移入事件
onmouseout鼠标移出事件

var a=document.getElementById();
a.onclick=function(){
    alert('')
}

鼠标移入移出实例

HTNL代码

<ul id="ul" onmouseover="a()" onmouseout="b()">
    <li>鹅鹅鹅</li>
    <li>曲项向天歌</li>
    <li>白毛浮绿水</li>
    <li>红掌拨青波</li>
</ul>

js代码

var a = document.getElementById('ul');
    function a() {
        a.style.background = '#000';
        a.style.color = '#fff';
    }
    function b() {
        a.style.background = '';
        a.style.color = '';
    }

点击事件实例

HTML代码

<button id="anniu">隐藏/显示</button>
<button id="xianshi">显示红色</button>
<button id="xianshia">变方</button>
<button id="xianshis">变圆</button>
<div>
</div>

js代码

var a = document.getElementById('anniu');
    var c = document.getElementById('xianshi');
    var d = document.getElementById('xianshia');
    var e = document.getElementById('xianshis');
    var b = document.getElementsByTagName('div');
    var nam = 1;
    a.onclick = function() {
        if(nam == 1) {
            b[0].style.display = 'none';
            nam = 0;
        } else {
            b[0].style.display = 'block';
            nam = 1;
        }
    }
    c.onclick = function() {
        b[0].style.backgroundColor = '#f00';
        b[0].style.display = 'block';
    }
    d.onclick = function() {
        b[0].style.borderRadius = '0%';
    }
    e.onclick = function() {
        b[0].style.borderRadius = '50%';
    }