用JavaScript语言编写:点击对应颜色的小方块更换主题颜色
2015-08-15 21:58
639 查看
用JavaScript语言编写:点击对应颜色的小方块更换主题颜色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div, ul { margin: 0; padding: 0; } .first { height: 50px; /*outline: 1px solid red;*/ } .second { height: 400px; outline: 1px solid gray; } #change { height: 370px; } .first>div { float: right; width: 30px; height: 30px; /*outline: 1px solid red;*/ margin: 5px; margin-top: 9px; } .first>div:nth-child(1) { background-color: pink; } .first>div:nth-child(2) { background-color: blue; } .first>div:nth-child(3) { background-color: orange; } .second>div:first-child { height: 40px; /*outline: 1px solid red;*/ background-color: gray; } ul { list-style-type: none; } </style> </head> <body> <div class="first"> <div id="pink" onclick="document.getElementById('change').style.backgroundColor='pink'"></div> <div id="blue" onclick="document.getElementById('change').style.backgroundColor='blue'"></div> <div id="orange" onclick="document.getElementById('change').style.backgroundColor='orange'"></div> </div> <div class="second"> <div></div> <div id="change"> <ul> <li>小明回去好好看课堂代码,还有救,不要放弃</li> <li>小红也回去一起好好加油看代码</li> <li>小王也是</li> <li>你们今天太棒了,表扬一下</li> </ul> </div> </div> </body> <script type="text/javascript"> </script> </html>
相关文章推荐
- Javascript中自执行函数
- 用javascript设置图片的轮播
- 几种自动执行js代码的方式
- HTML/CSS/Javascript调试入门(转)
- [LeetCode][JavaScript]Subsets II
- HTML/CSS/JavaScript学习总结(转)
- [LeetCode][JavaScript]Subsets
- JavaScript基础学习之-JavaScript权威指南--3.2文本
- javascript实现简单日期下拉选择器
- JS学习十六天----单例模式
- JavaScript基础学习之-JavaScript权威指南--3.1数字
- Top 10:HTML5、JavaScript 3D游戏引擎和框架
- JS学习十五天----设计模式开篇
- JSON数据解析
- 文件管理与XMl、JSON解析
- JavaScript高级程序设计笔记(3)
- JS中!=与==与!==与===的用法和区别
- js时钟翻牌效果实现代码分享
- JavaScript基础学习之-自定义对象(2)
- JavaScript基础学习之-自定义对象(1)