运行效果：

源代码：

 1 <!DOCTYPE html>

 2 <html lang="zh">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>改变背景颜色</title>

 6 </head>

 7 <body>

 8 <div style="margin-top: 100px;margin-left: 100px;">

 9     <button type="button" onclick="ChangeBackgroundColor('red')">红</button>

10     <button type="button" onclick="ChangeBackgroundColor('blue')">蓝</button>

11     <button type="button" onclick="ChangeBackgroundColor('green')">绿</button>

12 </div>

13

14 <script type="text/javascript">

15     function ChangeBackgroundColor(new_bgcolor) {

16         document.bgColor = new_bgcolor;

17     }

18 </script>

19 </body>

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. 矩池云上使用nohup和&让任务后台运行

    1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...

  2. 微信小程序获取当前的时间戳

    js文件中进行计算var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; console.log(timestamp ...

  3. gitee的使用

    git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...

  4. tp5 多文件上传

    路由: Route::post('imgs','task/task/uploads'); 控制器代码: // 多文件上传 public function uploads() { //接受参数 $dat ...

  5. https 加密原理

    转载于 https://www.cnblogs.com/imteck4713/p/12016313.html 补充: <图解HTTP> 1.引言 随着互联网安全意识的普遍提高,对安全要求稍 ...

  6. JDBC学习一---JDBC入门

    原文链接 今天开始会写一系列 Java 后端学习的笔记,一方面是为了以后翻阅查看,更主要的原因是通过写作输出的方式让自己的印象更深,避免遗忘. 首先是简单记录下自己学习使用 JDBC 的历程,由于目前 ...

  7. ACL流策略

    QoS实现工具之MQC-qos设置 作者:上犹日期:2019-10-23 11:30:36 返回目录:设置问题 QoS技术可以对网络中报文进行分类处理,根据优先级提供不同的差分服务,如何实现这种差分服 ...

  8. spring——依赖注入的三种方式

    1 构造器注入(与构造器有直接关系) 默认无参构造 3种构造方式:通过<contructor-arg>调用类中的构造器 下标 <bean id="userService&q ...

  9. kubernetes关于证书配置得问题总结

    总结证书配置 1.证书首先分为两种配置方式, 1) 一种是在集群中配置 2) 一种是在上游负载均衡中配置. 1)https证书在集群中配置,并域名直接解析到集群的ingress-nginx-contr ...

  10. SpringBoot在线预览PDF文件（引用pdf.js工具）

    本项目Demo使用了PDF.js插件实现PDF在线阅读功能PDF.js插件下载地址 实测能用! 1.创建SpringBoot项目,目录结构如下: 2.进行项目配置: pom.xml: <proj ...