运行效果:

源代码:

  1. 1 <!DOCTYPE html>
  2. 2 <html lang="zh">
  3. 3 <head>
  4. 4 <meta charset="UTF-8">
  5. 5 <title>改变背景颜色</title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <div style="margin-top: 100px;margin-left: 100px;">
  9. 9 <button type="button" onclick="ChangeBackgroundColor('red')">红</button>
  10. 10 <button type="button" onclick="ChangeBackgroundColor('blue')">蓝</button>
  11. 11 <button type="button" onclick="ChangeBackgroundColor('green')">绿</button>
  12. 12 </div>
  13. 13
  14. 14 <script type="text/javascript">
  15. 15 function ChangeBackgroundColor(new_bgcolor) {
  16. 16 document.bgColor = new_bgcolor;
  17. 17 }
  18. 18 </script>
  19. 19 </body>
  20. 20 </html>

JavaScript实现按钮改变网页背景色的更多相关文章

  1. 点击按钮改变div背景色,再次点击恢复 -- 原生JS

    如果对您有帮助,记得点个赞哦!

  2. Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色

    >>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...

  3. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

  4. js根据浏览器窗口大小实时改变网页文字大小

    目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小. 代码: &l ...

  5. javascript和swf在网页中交互的一些总结

    Javascript和swf在网页中交互一般可有以下几种情况: 1.swf和这些调用的javascript在同域 2.swf和这些调用的javascript在不同域,比如加载远程的swf然后call别 ...

  6. JavaScript文件应该放在网页的什么位置

    JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...

  7. JavaScript HTML DOM - 改变 HTML

    JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...

  8. JavaScript插件——按钮

    Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  9. C#TreeView节点选中后失去焦点时改变节点背景色

    C#TreeView节点选中后失去焦点时改变节点背景色 在使用TreeView控件时候,单击一个节点,当鼠标聚焦到别的地方的时候,之前点击的这个节点就看不清楚了 举例截图 单击后           ...

随机推荐

  1. Zookeeper(1)-安装与基础使用

    Zookeeper 服务端 工作机制 Zookeeper从设计模式角度来理解:是一个基于观察者模式设计的分布式服务管理框架,它负责存储和管理大家都关心的数据,然后接受观察者的注册,一旦这些数据的状态发 ...

  2. python安装各种插件

    http://www.lfd.uci.edu/~gohlke/pythonlibs/#pip 感受:如果编辑pip真的一直出问题,考虑降成32位的进行安装.毕竟合理搭配比木桶突出有用.

  3. Python:pyglet学习(1):想弄点3D,还发现了pyglet

    某一天,我突然喜欢上了3D,在一些scratch教程中见过一些3D引擎,找了一个简单的,结果z轴太大了,于是网上一搜,就发现了pyglet 还是先讲如何启动一个窗口 先看看官网: Creating a ...

  4. 面试官:Redis如何实现持久化的、主从哨兵又是什么?

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Redi ...

  5. Kubernetes系列(三) Deployment

    作者: LemonNan 原文地址: https://juejin.im/post/6865672466939150349/ Kubernetes 系列 Kubernetes系列(一) Pod Kub ...

  6. Mysql-基础-DDL-数据定义语言

    一.SQL通用语法 SQL 语法可以单行或者多行书写,以分号结尾. SQL 语句可以使用空格/缩进来增强语句的可读性. Mysql 数据库的 SQL 语句不区分大小写,关键字建议使用大写. 注释: 单 ...

  7. Idea 连接MySQL数据库

    Idea 连接MySQL数据库 注意: 需要导入jar包,mysql-connector-java-8.0.16.jar mysql8.0及以上 使用的驱动 drive=com.mysql.cj.jd ...

  8. Flask 之 WebSocket

    http:是一个协议 规定:数据传输格式 -/r/n/r/n 一次的请求,一次的响应,断开了 短链接 无状态 服务器收到的请求,做出的响应给客户端 客户端主动向服务器发起请求 基于socket sen ...

  9. MySQL SQL Injection Cheat Sheet

    MySQL SQL Injection Cheat Sheet Some useful syntax reminders for SQL Injection into MySQL databases- ...

  10. bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路)

    bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路) 题目描述: bzoj  luogu 题解时间: 首先考虑海拔待定点的$h$都应该是多少 很明显它们都是$0$或$1$,并且所 ...