<!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. oracle 命令创建用户 、授权、数据库导入、导出

    最近在使用oracle,经常要导入导出数据,命令很简单,却经常忘记,所以记下来.. drop user yfplss cascade;--登录system用户删除已存在的用户名,该用户下的所有东西都被 ...

  2. self

    self在对象方法中使用,指代调用当前对象方法的对象.可以利用self->属性名称的方法访问成员变量 self在类方法中使用,其指代的是当前类. 使用总结: self 谁调用当前方法,self就 ...

  3. ios 按钮常见属性

    1.UIButton状态: UIControlStateNormal          // 正常状态    UIControlStateHighlighted     // 高亮状态    UICo ...

  4. 关于JPA多数据源的部署persistence.xml文件配置以及对应实现类注入

      <?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http: ...

  5. Spring-----Spring Jar包

    转载自:http://blog.csdn.net/hekewangzi/article/details/51713110

  6. hdu4753

    很简单的位模拟(bit-mask),可惜队友读题误以为很难,没有及时跟我交流,不然应该很早就可以出了. 很容易看出来,总共才16个点.24条边.用一个int类型数字就可以描述这个图了,按照16点的关系 ...

  7. leetcode Linked List Cycle python

    # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val = ...

  8. PHP正则提取HTML中img的url值

    <html> <head> <title>获取HTML中的img的src值</title> </head> <body> < ...

  9. getActionBar().setTitle(); Java.lang.NullPoint异常解决方案

    getActionBar().setTitle(); Java.lang.NullPoint异常解决方案,是由于低版本不支持直接获取的缘故,修改方案: try changing your theme ...

  10. 3D空间坐标系转换复习

    模型坐标系:ModelSpace     即模型本身为中心  模型本身自己 世界坐标系:WorldSpace    世界坐标系   整个世界 视角坐标系: ViewSpace       眼睛看到的范 ...