您的位置：首页 > Web前端 > JavaScript

javascript小练习—点击将DIV变成红色（通过for循环遍历）

2015-05-19 09:23 239 查看

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>点击将DIV变成红色</title>

<style>

body{font:12px/1.5 Tahoma;text-align:center;}

code,input,button{font-family:inherit;}

#div{width: 1000px;height: 240px;position: relative;}

#div div{width: 200px;height: 200px;background-color: black;position: relative;float: left;margin: 10px;}

button{cursor:pointer;}

</style>

<script>

window.onload = function(){

var oDiv = document.getElementById("div").getElementsByTagName("div");

var oButton = document.getElementsByTagName("button")[0];

oButton.onclick = function(){

for(var i = 0;i<oDiv.length;i++){

oDiv[i].style.backgroundColor = "red";

}

};

};

</script>

</head>

<body>

<div id="div">

<div></div>

<div></div>

<div></div>

</div>

<p><button>点击将DIV变成红色</button></p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航