运行效果：

源代码：

 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. Python中的os.environ系列的用法

    >>> import os >>> os.environ.keys() ['LC_NUMERIC', 'GOPATH', 'GOROOT', 'GOBIN', 'L ...

  2. MariaDB 与Mysql版本对应关系

    特定MariaDB版本的完全兼容性 就InnoDB而言,MariaDB 10.2.MariaDB 10.3和MariaDB 10.4是MySQL 5.7的有限替代.然而,在每一个新的MariaDB版本 ...

  3. XSS攻击防范

    前端安全系列之XSS攻击防范 1.使用textContent 2.使用HTML转义 把JS中的标签转成字符 3.对于链接跳转 禁止含有'javascript:'开头的字符 4.标签属性中含有恶意执行代 ...

  4. pd.cut和pd.qcut（）之间的区别

  5. WPF之VisualTreeHelper

     /// <summary>        /// </summary>        /// <typeparam name="T">< ...

  6. Apple macOS Mojave Intel Graphics Driver组件任意代码执行漏洞

    受影响系统:Apple macOS Mojave 10.14.5描述:CVE(CAN) ID: CVE-2019-8629 Apple macOS Mojave是苹果公司Mac电脑系列产品的操作系统. ...

  7. VS Code Java 3月更新｜代码补全、Maven 以及 Java 插件预览版本新升级！

    Nick Zhu Senior Program Manager, Developer Division at Microsoft 大家好,欢迎来到 Visual Studio Code Java 的 ...

  8. loj2985「WC2019」I 君的商店(二分，思维)

    loj2985「WC2019」I 君的商店(二分,思维) loj Luogu 题解时间 真的有点猛的思维题. 首先有一个十分简单的思路: 花费 $ 2N $ 确定一个为 $ 1 $ 的数. 之后每次随 ...

  9. 基于COLA架构的电商财务系统-总

    财务 清算-clearing 对账-check 结算-settle 平账-correct 划拨-remit 包划分 按照COLA规则进行划分,综合考虑功能和领域两个维度包结构定义 技术参考 dddpl ...

  10. SpringBean的生命周期 以及一些问题总结

    SpringBean的生命周期 一.传统 Bean 的生命周期 new实例化: 可使用了 无引用时,GC回收. 二.Servlet 的生命周期 实例化Servlet对象: init初始化对象: 相应客 ...