JavaScript--点击颜色,为主题更换背景颜色
2015-08-16 22:06
387 查看
鼠标点击颜色块,指定区域背景颜色更换
完整代码:
完整代码:
<!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>123</li> <li>456</li> <li>789</li> <li>123</li> </ul> </div> </div> </body> <script type="text/javascript"> </script> </html>
相关文章推荐
- JavaScript中的this代表什么?
- JavaScript--利用setInterval或setTimeout实现背景颜色轮播
- js中的事件
- JvaScript--使用js添加数据,点击按钮,将内容放入表格中
- 45种Javascript技巧大全
- JS设置 cookie,删除 cookie
- 【JavaScript】AJax
- Javascript 基础
- Javascript 基础
- hdu 1874 畅通工程续 dijsktra dijkstra+邻接表 优先队列 bellman-ford bellman-ford队列优化(基础题目,一步步优化)
- 不用js实现背景图片的切换
- JavaScript编程--任意输入一个数判断是不是闰年,数列求和练习
- JS中浏览器兼容性知识
- JS学习十七天----工厂方法模式
- JavaScript删除数组重复元素的5个高效算法
- jsp url传参加密
- jsp页面表单的遍历要怎么写
- dijstra(迪杰斯特拉)算法的简单实现
- JavaScript input file上传前获取文件名、文件类型、文件大小等信息
- 使用js使表单自动提交