查看本章节

查看作业目录

需求说明：

根据在下拉列表框中选择的内容，决定页面效果

用户在下拉列表框中选择页面将 要使用的背景颜色

当用户选择橙色时，页面背景将显示为橙色

实现思路：

  1. 用表单 <select> 元素列出可以选择的背景颜色
  2. 在 JavaScript 脚本中设置 <select> 元素对象的 onchange 事件属性，让 onchange 事件属性值等于处理该事件的匿名函数
  3. 在匿名函数内部获取 <select> 元素的选项值，并设置为页面背景色 使用浏览器预览效果

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<h1>请选择背景颜色：</h1>

		<select id="setColor" >

			<option value="white">白</option>

			<option value="purple">紫</option>

			<option value="orange">橙</option>

			<option value="gray">灰</option>

			<option value="yellow">黄</option>

		</select>

		<script type="text/javascript">

			document.getElementById("setColor").onchange = function(){

				document.bgColor=this.value;

			}

		</script>

	</body>

</html>

使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容，决定页面效果，用户在下拉列表框中选择页面将要使用的背景颜色的更多相关文章

  1. 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 的 HTML 页面混合.JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出"点击我进 ...

  2. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  3. marquee标签实现页面内容的滚动效果

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  4. 坑人的MyEclipse之-修改JSP页面的JavaScript背景颜色

    MyEclipse开发JSP页面时,如果要写JavaScript代码, 背景颜色默认是白色!效果如下: 这种反人类的设计我已经无力吐槽了!要改为黑色的话可以通过下面的方法设置:

  5. 033. asp.netWeb用户控件之二将页面转换成web控件和使用Web控件显示热点新闻

    访问Web用户控件的属性 ASP.NET提供的各种服务器控件都有其自身的属性和方法,程序开发人员可以灵活地使用服务器控件中的属性和方法开发程序.在用户控件中,程序开发人员也可以自行定义各种属性和方法, ...

  6. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  7. Ruby Rails学习中：有点内容的静态页面

    续上篇: 一. 有点内容的静态页面 rails new 命令创建了一个布局文件, 不过现在最好不用.我们重命名这个文件: $ mv app/views/layouts/application.html ...

  8. JS window对象 History 对象 history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。语法： window.history.[属性|方法]

    History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...

  9. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

随机推荐

  1. 什么是 IP 地址 – 定义和解释

    IP 地址定义 IP 地址是一个唯一地址,用于标识互联网或本地网络上的设备.IP 代表"互联网协议",它是控制通过互联网或本地网络发送的数据格式的一组规则. 本质上,IP 地址是允 ...

  2. Oracle中的DBMS_LOCK包的使用

    一.DBMS_LOCK相关知识介绍 锁模式: 名字 描述 数据类型 值 nl_mode Null INTEGER 1 ss_mode Sub Shared: used on an aggregate ...

  3. Linux基础命令---mysqldump数据库备份

    mysqldump mysqldump是一个客户端的备份程序,他可以备份数据库,或者将数据库传输到另外一个服务器. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. ...

  4. 2.9 go mod 之本地仓库搭建

    wikihttps://github.com/golang/go/wiki/Modules#how-to-prepare-for-a-release参考https://blog.csdn.net/be ...

  5. linux-源码软件管理-yum配置

    总结如下:1.源码配置软件管理2.配置yum本地源和网络源及yum 工作原理讲解3.计算机硬盘介绍 1.1 源码管理软件 压缩包管理命令: # 主流的压缩格式包括tar.rar.zip.war.gzi ...

  6. 通过jquery实现form表单提交后不跳转页面，保留当前页面

    jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...

  7. 关于python中的随机种子——random_state

    random_state是一个随机种子,是在任意带有随机性的类或函数里作为参数来控制随机模式.当random_state取某一个值时,也就确定了一种规则. random_state可以用于很多函数,我 ...

  8. Java中方法和类的深入分析

    1.构造方法不能被继承.也就是说子类里没有父类的构造方法.   Java重载根据的是实参和方法形参之间的匹配.自动类型转换也在重载版本的判断中起到了作用.重载的价值在于允许使用通用名称访问相关的方法. ...

  9. centos部署配置gogs代码仓库

    目录 一.简介 二.部署 三.网页配置 一.简介 Gogs的目标是打造一个最简单.最快速和最轻松的方式搭建自助Git服务.使用Go语言开发使得Gogs能够通过独立的二进制分发,并且支持Go语言支持的 ...

  10. 『学了就忘』Linux系统定时任务 — 87、只执行一次的定时任务

    目录 1.at服务管理 2.at命令的访问控制 3.at命令 4.其他at管理命令 5.总结 定时任务是在服务器上常用到的一个工作. 在你指定的时间,系统会自动执行你指定的程序(脚本或者命令). Li ...