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

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

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

    px/px solid redpxpx]; var oTips = document.getElementById("tips"); oP.onmousemove = functi ...

  2. 用循环将三个DIV变成红色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  4. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  5. (网页)javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  6. JavaScript小练习2-网页换肤

    题目 分析 三个皮肤切换按钮的选择 用li即可. 点击显示白点 li中嵌套一个li,onclick时改变子元素li的css onload 当页面加载完成后立即执行一段JavaScript代码. onl ...

  7. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点

    <div id="show"> <div>1</div> <div>2</div> <div>3</d ...

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. js实现弹出窗口、页面变成灰色并不可操作的例子

    function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...

  2. SQL Server 触发器2

    触发器可以做很多事情,但也会带来很多问题.使用它的技巧在于在适当的时候使用,而不要在不适当的时候使用它们. 触发器的一些常见用途如下: 弹性参照完整性:实现很多DRI不能实现的操作(例如,跨数据库或服 ...

  3. Java代码整理

  4. Algorithms 4th - 1.1 Basic Programming Model - CREATIVE PROBLEMS

    欢迎交流 1.1.26 public class TestApp { public static void main(String[] args) { int a = StdIn.readInt(); ...

  5. MyIsam与InnoDB主要区别

    MyIsam与InnoDB主要有以下4点大的区别,缓存机制,事物支持,锁定实现,数据物理存储方式(包括索引和数据). 1.缓存机制 myisam 仅仅缓存索引,不会缓存实际数据信息,他会将这一工作交给 ...

  6. AJAX获取JSON形式的数据

    test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. IE的事件与w3c事件的区别

    14. offsetWidth, scrollLeft, scrollHeight?     scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollHeig ...

  8. windbg命令学习1

    一.windbg 常用知识: 1. Windbg中的调试命令,分为三种:基本命令,元命令和扩展命令.基本命令和元命令是调试器自带的,元命令总是以“.”开头,而扩展命令是外部加入的,总是以感叹号“!”开 ...

  9. python进阶--打包为exe文件

    一.Python打包为EXE文件有不少方案,比较常用的有下面两种方式: 1.使用py2exe 详细介绍:http://www.cnblogs.com/jans2002/archive/2006/09/ ...

  10. SLC、eSLC、MLC、eMLC的区别

    SLC.eSLC.MLC.eMLC的区别 作为SSD主要元件的NAND闪存,我们经常见到的有SLC和MLC两种,甚至还细分出eSLC和eMLC等等,现在我们谈一下他们之间的区别.       SLC全 ...