运行效果：

源代码：

 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. jmeter之如何减负-实现稳定超高并发测试（性能调优）之正确添加监听器

    jmeter之如何减负-实现稳定超高并发测试(性能调优)在测试过程中,初学者使用工具不当,添加众多监控组件,非常想看到实时报告,跑不了一会,jmeter就卡死,只得重启 下面来总结下如何正确使用jme ...

  2. linux curl 的用法指南

    curl用法指南

  3. 如何构建一个PKM系统

    原文链接 这篇文章是个人知识总结相关的第一篇文章,主要目的是为了阐述我们为什么需要一个 PKM 系统,并且简单对自己这几年亲身形成的PKM 系统进行总结. PKM 是什么? PKM 是 Persona ...

  4. Spring系列16：ApplicationContext扩展国际化

    本文内容 BeanFactory对比ApplicationContext ApplicationContext的扩展能力 国际化 BeanFactory对比ApplicationContext 简单点 ...

  5. web自动化之selenium(六)利用坐标点定位

    这是通过第三发库实现对元素的定位,因为在无法定位元素的时候,只能通过外部来定位,此时就可以使用pyautogui模块,操作鼠标,模拟人进行操作 # 使用注意事项,不要过于的依赖它 1.使用时需要在通过 ...

  6. Android 12(S) 图形显示系统 - BufferQueue的工作流程（十一）

    题外话 我竟然已经写了这个系列的十一篇文章了,虽然内容很浅显,虽然内容很枯燥,虽然内容也许没营养,但我为自己的坚持点赞! 一.前言 前面的两篇文章,分别讲解了Producer的处理逻辑和queue b ...

  7. linux 下载源

    Cenos7 Nginx [nginx-stable]name=nginx stable repobaseurl=http://nginx.org/packages/centos/$releaseve ...

  8. ZYNQ使用ymodem协议传输文件

    SDK: V2014.4 协议: Ymodem 工具: USB转UART转接线.xshell6软件 可实现各种文件传输,大小不限,只是速度很慢 参考原代码如下: /****************** ...

  9. 虚拟机Centos安装配置

    开始吧~ 新建一个虚拟机 完成后编辑虚拟机 配置内存 处理器: 映像文件: 点击确定完成配置: 开启虚拟机,对操作系统进行配置 输入红线上内容,为计算机选择默认网卡 选择安装时的语言,可选择中文: 设 ...

  10. kdump原理，是如何找到入口的

    请解释下kdump原理,捕获内核是如何获取到生产内核的首地址的.