查看本章节

查看作业目录

需求说明：

使用 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. 【c++】解析多文件编程的原理

    其实一直搞不懂为什么头文件和其他cpp文件之间的关系,今晚索性一下整明白 [c++]解析多文件编程的原理 a.cpp #include<stdio.h> int main(){ a(); ...

  2. 内存管理——array new，array delete

    1.array new array new就是申请一个数组空间,所以在delete的时候一定不能忘记在delete前加[] delete加上[]符号以后,就相当于告诉系统"我这里是数组对象, ...

  3. Hibernate持久化标志符生成策略

    generator子元素定义持久化标识符的生成策略,为持久化类对应的数据库表的主键找到了赋值方法,HIbernate默认将使用assigned的持久化标识符生成策略.关系型数据库的主键定义方式:(1) ...

  4. 【Java基础】transient关键字

    1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过 ...

  5. java异常处理中throws和throw的使用

    异常介绍: 运行时异常.非运行时异常 在编写可能会抛出异常的方法时,它们都必须声明为有异常. 一.throws关键字 1.声明方法可能抛出的异常: 2.写在方法名后面: 3.可声明抛出多个异常,异常名 ...

  6. shell脚本 批量查看mysql表条目数

    一.简介 源码地址 日期:2018/4/12 介绍:查看mysql的信息,用于比对和查询条目数 效果图: 二.使用 适用:centos6+ 语言:中文 注意:适用于5.7版本,其它版本要更改变量han ...

  7. PHP数组函数总结与使用

    array_change_key_case(数组,CASE_LOWER/CASE_UPPER) 数组键值转化为小写CASE_LOWER/大写CASE_UPPER   array_chunk(数组,分割 ...

  8. IO多路复用技术总结

    来源:微信公众号「编程学习基地」 IO 多路复用概述 I/O 多路复用技术是为了解决进程或线程阻塞到某个 I/O 系统调用而出现的技术,使进程不阻塞于某个特定的 I/O 系统调用. 在IO多路复用技术 ...

  9. [BUUCTF]PWN13——ciscn_2019_n_8

    [BUUCTF]PWN13--ciscn_2019_n_8 题目网址:https://buuoj.cn/challenges#ciscn_2019_n_8 步骤: 例行检查,32位,保护开的挺多,ca ...

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

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