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

<!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>

时间： 2024-10-11 15:51:04

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

React练习 4 ：点击将 div 变为红色

简要:原作为使用for循环更改div的background来实现的. 此处使用三元操作符:点击按钮时,通过boolean来判断作为开关,添加类 new,实现同样的效果. import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function ChangedivColor(props){ const [isRed,setRed]=useState

javascript小练习—记住密码提示框

<!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;} #tips{border

用循环将三个DIV变成红色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript DOM案例点击按钮显示隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <

javascript小技巧(非常全)

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.act

JavaScript总结之单击弹出div

今天也算用了不少手段来实现他们的要求,大概记录一下,下边的代码示例,我全部修改贴出来,争取全部占到自己的代码里就能用. 1.点击同一个div,打开/关闭另一个div. 1 1 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 2 2 <script type="text/javascript"> 3 3 /*var btnSh

Linux下之使用简单3种创建文件的命令，并实现一个Html和JavaScript小程序

1.今天来说一下在linux下如何实现一个JavaScript程序,这个很简单,如果大家想要在linux下搞web开发,服务器架设,大数据等方面,就得继续努力了! 2.首先,我们要实现一个JavaScript小程序,必须要有一个后缀名为html.htm等的文件,所以我先介绍一下三个创建文件的命令: (1).touch命令:这个命令可以在当前工作目录底下新建一个文件,示例如下图: 这个touch命令只创建了一个空文件,要输入内容又必须使用gedit命令和vi命令来打开文件,并可以写入内容,如果文件

javascript学习代码--点击按钮显示内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

如何设计点击点击一个div，其他div做出对应反应

<div id="show"> <div>1</div> <div>2</div> <div>3</div> </div> <div id="click"> <div>click1</div> <div>click2</div> <div>click3</div> </div>