JS实现点击改变元素背景色Demo
2017-06-22 本文已影响749人
媛媛ing
从此踏上了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等事件，实现不同的效果。
我的文章很简单，不求打赏，但求喜欢。
