查看本章节

查看作业目录


需求说明:

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

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

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

实现思路:

  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. 重量级&轻量级

    重量级 就是说包的大小,还有就是与个人项目的耦合程度,重量级的框架与项目耦合程度大些 代表EJB容器的服务往往是"买一送三",不要都不行 轻量级 就是相对较小的包,当然与项目的耦合 ...

  2. java中二维数组初始化的几种方法

    /* 第一种方式 */ int tdarr1[][] = { { 1, 3, 5 }, { 5, 9, 10 } }; /* 第二种方式 */ int tdarr2[][] = new int[][] ...

  3. 基于Github Actions + Docker + Git 的devops方案实践教程

    目录 为什么需要Devops 如何实践Devops 版本控制工具(Git) 学习使用 配置环境 源代码仓库 一台配置好环境的云服务器 SSH远程登录 在服务器上安装docker docker技术准备工 ...

  4. Mysql配置文件 扩展详细配置

    目录 配置文件中有些特定参数 扩展配置 max_connections connect_timeout interactive_timeout|wait_timeout net_retry_count ...

  5. Python的安装和卸载

    一.Python的安装,去Python官网https://www.python.org/downloads/下载对应安装包 进入官网后鼠标移动到downloads处然后点击Windows 二.安装包下 ...

  6. [BUUCTF]PWN——bbys_tu_2016

    bbys_tu_2016 附件 步骤: 例行检查,32位程序,开启了nx保护 本地试运行一下程序,看看大概的情况,测试时候发现输入长度过长程序会崩溃,猜测输入点存在问题 32位ida载入,检索程序里的 ...

  7. SpringMVC 入门、请求、响应

    目录 SpringMVC 概述 SSM 简介 MVC 简介 SpringMVC 简介 入门案例 Spring 技术架构 SpringMVC 基础配置 常规配置 Controller 加载控制 静态资源 ...

  8. jQuery实现页面导航内容定位效果,并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  9. protoc格式生成java文件

    下载protoc.exe 地址:https://yvioo.lanzoui.com/i12opqs7q9g 下载好之后 ,把protoc文件和exe放在一个文件夹内 用记事本打开protoc,删掉包路 ...

  10. C语言之可变长参数格式化

    概述 本文演示环境: win10 + Vs2015 可变长参数格式化 两个概念: 1. 参数长度不定, 2. 参数格式化. 使用函数 vsnprintf 结合 va_list. 源码 写好了函数, 照 ...