查看本章节

查看作业目录

需求说明：

使用 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++构造函数和析构函数初步认识(2)

    构造函数的三个作用1.构造对象2.对象初始化3.类型转换  //Test1.h #include<iostream> using namespace std; //构造对象 //初始化对象 ...

  2. SpringMVC(3)：AJAX

    一,AJAX 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...

  3. Windows10常用快捷键+cmd常见命令码

    Windows10常用快捷键+cmd常见命令码 1.Ctrl快捷键 Ctrl+C: 复制 Ctrl+V: 粘贴 Ctrl+A: 全选内容 Ctrl+S: 保存 Ctrl+X: 剪切 Ctrl+Z: 撤 ...

  4. 学Java，Java书籍的最佳阅读顺序

    疫情以来,好久没出差了,今天出差去趟上海,早上 4 点多就起床了,到机场天都没亮.到登机口离起飞还一小时,趁着等飞机的时间,抓紧码字,把这篇文章收个尾. 今天和大家说说学 Java 的读书路线.路线中 ...

  5. LuoguB2013 温度表达转化 题解

    Content 输入华氏温度 \(F\),请将其转化为摄氏温度 \(C\),精确到小数点后 \(5\) 位. 数据范围:\(F\geqslant -459.67\). Solution 简单的输入输出 ...

  6. Git差异并列显示

    默认的git diff命令只会将文件的修改差异使用"+","-"符号标注出来,并不直观. 最理想的方式应该是使用诸如"DiffMerge"这 ...

  7. Shell脚本--数值比较组合判断

    用于数值比较的无非大于.小于.等于.大于等于.小于等于这几个. 比较格式: [ 数值1 比较符 数值2 ]   注意左边的括号与数值1之间有一个空格,同样,数值2和右边的括号之间也有空格. 数值比较运 ...

  8. SQL：大表多表更新的两种方法

    #标记不参与计算的明细(跨平台的或is_end=2)#跨平台订单:暂不处理 说明:大表即order_list_wx,几十万,需要根据小表(order_list_zfb ,几万)来做更新,查出两个平台都 ...

  9. Coder 投稿 | mPaaS 的多版本接入（Android）

    本文作者:mPaaS 用户「Q-Coder」 同时欢迎更多的开发者向 mPaaS 投稿 原文:blog.csdn.net/yqq577/article/details/116801705 前言 对于 ...

  10. IDEA微服务项目SpringBoot一键（批量）顺序启动

    找到 搜索 RunDashboard <option name="configurationTypes"> <set> <option value=& ...