运行效果：

源代码：

 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. php使用kafka代码

    生产者 producer.php文件 <?php /** * Created by PhpStorm. * User: shiyibo * Date: 2019/2/24 * Time: 12: ...

  2. ubuntu目录结构

    /:根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中 /bin:/usr/bin:可执行二进制文件的目录,如常用的命令ls. ...

  3. ERROR conda.core.link:_execute(481） 问题总结

    你好 在刚刚安装的Windows10 conda上,我很惊讶地被告知要将Navigator从1.7.0升级到1.8.2,因为我刚刚安装它.由于软件包没有安装在Navigator上,我尝试使用下面的命令 ...

  4. Flink域名处理

    概述 最近做了一个小任务,要使用Flink处理域名数据,在4GB的域名文档中求出每个域名的顶级域名,最后输出每个顶级域名下的前10个子级域名.一个比较简单的入门级Flink应用,代码很容易写,主要用到 ...

  5. SpringBoot——两种传参方式

    ?传参 举例:http://localhost:8082/news/asset/getDatas?page=1&keyWord=123&year=2020 注解:@RequestPar ...

  6. 自定义 Django admin 组件

    摘要:学习 Django admin 组件,仿照源码的逻辑,自定义了一个简易的 stark 组件,实现类似 admin 的功能. 可自动生成 url 路由,对于model 有与之相应的配置类对象,可进 ...

  7. 4月13日 python学习总结 组合与封装

    一.组合      解决类与类之间代码冗余问题有两种解决方案:1.继承 2.组合 1.继承:描述的是类与类之间,什么是什么的关系 2.组合:描述的是类与类之间的关系,是一种什么有什么关系 一个类产生的 ...

  8. 8元电调调参教程（使用Arduino Uno）| BLHeli无刷电调的固件烧写及调参

    前言 淘某上有款8元电调,性价比很高,但是需要简单设置一下 1.材料清单 (1)Arduino UNO开发板 (2)BLHeliSuite 16.7.14.9.0.1 调参软件及固件已上传Gitee: ...

  9. static变量和函数如何巧妙调用

    app.c 和 main.c 之间,在main.c中调用app.c的static变量和函数,需要利用一个结构体结合指针通过传地址的方式间接访问. app   --------------------- ...

  10. idea使用技巧、心得1

    0.安装idea之后的准备 (1) 永久快乐使用:在我的博客搜索安装idea关键词既可 (2) 取消更新: (3) idea 官网的关于idea的使用手册:https://www.jetbrains. ...