JS实现点击改变元素背景色Demo

作者: 媛媛ing | 来源:发表于2017-06-22 14:46 被阅读749次

从此踏上了HTML5的学习之路。以下是一个小demo，不足之处多多指教。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>换背景</title>
<style type="text/css">
    li{
        background: red;
        height: 40px;
        line-height: 40px;
    }
</style>
</head>
<body>
    <ul>
        <li>从此以后</li>
        <li>你</li>
        <li>就是我的了</li>
    </ul>

    <script type="text/javascript">
        var ul = document.getElementsByTagName("ul")[0];
        var li = document.getElementsByTagName("li");
        ul.onclick= function(e){

            for (var i = 0; i < li.length; i++) {
                li[i].style.background = "red";
            }

            var temp = e.srcElement;
            temp.style.background= "green";
        }
    </script>
</body>
</html>

复制代码即可看到效果。onclick 事件也可换成onmouseover等事件，实现不同的效果。

我的文章很简单，不求打赏，但求喜欢。