查看本章节

查看作业目录

需求说明：

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

实现思路：

  1. 在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色
  2. 在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性
  3. 在 <select> 节点下加入多个 <option> 节点，将 <option> 节点的值设置为不同的颜色值。在 <option>节点下加入文本节点，分别显示不同的颜色
  4. 设 置 <select> 节 点 的 onchange 事 件， 在 onchange 事 件 中 使 用 document 对 象 的 bgColor 属 性 和fgColor 属性设置文档的背景颜色和字体颜色

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<h1>更改字体颜色和背景颜色</h1>

		<select id="sel">

			<option value="bule">蓝色</option>

			<option value ="red">红</option>

			<option value="pink">粉</option>

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

			<option value="grend">绿</option>

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

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

		</select>

		<script type="text/javascript">

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

				document.bgColor=this.value;

				document.fgColor=this.value+255;

			};

		</script>

	</body>

</html>

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

  1. angularjs 绑定多个属性到下拉框

    绑定下拉框 angularjs  代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...

  2. dev中如何对combox下拉框设置可消除属性以及ASPxGridView中金额，数量的显示，以及总计、grid中某行值

    下拉框属性关键:IncrementalFilteringMode="StartsWith" DropDownStyle="DropDown" ASPxGridV ...

  3. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  4. js中遍历出查询后的listmodel(下拉框系列)

    function selectclassname(){ $.ajax({ url:"queryschoolclasslists.action", async:false, data ...

  5. select下拉框的探索（<option></option>标签中能嵌套使用其它标签吗）

      select标签大家应该经常用到,有个问题可能没怎么注意过, select标签里面的option标签可以嵌套其它标签吗,比如i,span标签等? 经本人测试,答案是:可以嵌套其它标签,但审查元素会 ...

  6. 转：【微信小程序常见问题】下拉框选择器设置picker属性。（包括：城市、日期和时间选择器）

    1.picker写法(支持日期Date.时间Time和城市自定义) wxml文件 <picker bindchange="bindPickerChange" value=&q ...

  7. element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑

    这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...

  8. <select>设置multiple="multiple"属性后 下拉框全部展开了 不再是折叠的怎么回事

    1 <select multiple="multiple" size="5"> <option>1</option> < ...

  9. 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

    参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn ...

  10. java swing 中JTable实现指定单元格为下拉框

    利用自定义的CellEditor实现第四列第二行为下拉框,本列其余行为文本框 利用默认的DefaultCellEditor设置第五列整列为下拉框   package mypackage; import ...

随机推荐

  1. haproxy动态增减主机与keepalived高级应用

    一:本文将详细介绍haproxy的配置使用以及高级功能的使用,比如通过haproxy进行动态添加删除负载集群中的后端web服务器的指定主机,另外将详细介绍keepalived的详细配置方法.配置实例及 ...

  2. mysql_取分组后的前几行值

    --方法一: select a.id,a.SName,a.ClsNo,a.Score from Table1 a left join Table1 b on a.ClsNo=b.ClsNo and a ...

  3. Oracle中分割逗号函数REGEXP_SUBSTR

    最近优化FORM中的查询条件遇到某个字段可以选取多个值的问题,思路当然就是选取时将多个值通过某个符号拼接起来,查询数据的时候将拼接后的字符串按照符号分割开,在分割逗号的时候用到了一个新的方法REGEX ...

  4. zabbix之主动模式和proxy的主动模式

    #:找一台新主机配置上agent,注意版本要和server端保持一样 #:官网地址:https://www.zabbix.com/documentation/4.0/zh/manual/install ...

  5. oracle(数据文件)

    --创建数据文件 create tablespace--创建表空间同时创建数据文件 create temporary tablespace --创建临时表空间的同时创建临时数据文件 alter tab ...

  6. node.js require() 源码解读

    时至今日,Node.js 的模块仓库 npmjs.com ,已经存放了15万个模块,其中绝大部分都是 CommonJS 格式.这种格式的核心就是 require 语句,模块通过它加载.学习 Node. ...

  7. 关于input单选框的radio属性

    最近在做前端页面的时候遇到一个问题(后端php猴子前端不怎么写) 我写了一段代码: <form action="">        <label for=&quo ...

  8. 小迪安全 Web安全 基础入门 - 第九天 信息打点 - CDN绕过篇&漏洞回链&接口探针&全网扫描&反向邮件

    一. CDN知识-工作原理及阻碍 (一)工作原理 1.概述:CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地 ...

  9. Linux三剑客综合练习

    1.找出/proc/meminfo文件中以s开头的行,至少用三种方式忽略大小写 [root@localhost ~]# grep -E '^[sS]' /proc/meminfo [root@loca ...

  10. JAVA实现根据图片生成缩略图、裁剪、压缩图片

    依赖(用来复制文件,可以根据自己的来) <dependency> <groupId>commons-io</groupId> <artifactId>c ...