使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节
查看作业目录
需求说明：
使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
实现思路：
- 在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色
- 在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性
- 在 <select> 节点下加入多个 <option> 节点，将 <option> 节点的值设置为不同的颜色值。在 <option>节点下加入文本节点，分别显示不同的颜色
- 设 置 <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 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色的更多相关文章
- angularjs 绑定多个属性到下拉框
绑定下拉框 angularjs 代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...
- dev中如何对combox下拉框设置可消除属性以及ASPxGridView中金额，数量的显示，以及总计、grid中某行值
下拉框属性关键:IncrementalFilteringMode="StartsWith" DropDownStyle="DropDown" ASPxGridV ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- js中遍历出查询后的listmodel(下拉框系列)
function selectclassname(){ $.ajax({ url:"queryschoolclasslists.action", async:false, data ...
- select下拉框的探索（<option></option>标签中能嵌套使用其它标签吗）
select标签大家应该经常用到,有个问题可能没怎么注意过, select标签里面的option标签可以嵌套其它标签吗,比如i,span标签等? 经本人测试,答案是:可以嵌套其它标签,但审查元素会 ...
- 转：【微信小程序常见问题】下拉框选择器设置picker属性。（包括：城市、日期和时间选择器）
1.picker写法(支持日期Date.时间Time和城市自定义) wxml文件 <picker bindchange="bindPickerChange" value=&q ...
- element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑
这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...
- <select>设置multiple="multiple"属性后 下拉框全部展开了 不再是折叠的怎么回事
1 <select multiple="multiple" size="5"> <option>1</option> < ...
- 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn ...
- java swing 中JTable实现指定单元格为下拉框
利用自定义的CellEditor实现第四列第二行为下拉框,本列其余行为文本框 利用默认的DefaultCellEditor设置第五列整列为下拉框 package mypackage; import ...
随机推荐
- STL全特化与偏特化
在泛型编程中,常常会使用一些非完全泛型的类模板,这就是特化. 如何理解全特化呢?如上图所示,第一个template class是空间配置器的类模板,第二个就是一个全特化的template class. ...
- 【Go】【Basic】MacOS上搭建GO开发环境
1. GO下载 1.1. 下载地址:https://www.golangtc.com/download (需要科学上网) 1.1.1. PKG安装: 下载这个包:go1.9.2.darwin-amd6 ...
- Java 总纲
Java基础篇 Java资源下载 IntelliJ IDEA为类和方法自动添加注释 为什么JAVA对象需要实现序列化? maven ubantu安装maven Java Maven项目搭建 maven ...
- Spring DM 2.0 环境配置 解决Log4j问题
搭建 spring dm 2.0 环境出的问题 log4j 的问题解决办法是 一.引入SpringDM2.0的Bundle,最后完成如下图所示:注意:要引入slf4j.api.slf4j.log4j. ...
- Oracle 表结构管理
表其实是数据的'容器'.oracle有几种类型的表: 普通表(ordinary table)又叫堆组织表. 聚簇表(clustered table) 分区表(partition table) 外部表( ...
- MySQL批量数据脚本示例
一.建表 # 新建库 create database bigData; use bigData; #1 建表dept CREATE TABLE dept( id INT UNSIGNED PRIMAR ...
- JSP中session、cookie和application的使用
一.session (单用户使用) 1.用处:注册成功后自动登录,登录后记住用户状态等 使用会话对象session实现,一次会话就是一次浏览器和服务器之间的通话,会话可以在多次请求中保存和使用数据. ...
- 【C/C++】金币
做了一下去年的题目,今年看起来就没这么难了 从上到下的可以从下到上考虑,会简单很多,dp入门 题目 金币 小招在玩一款游戏,在一个N层高的金字塔上,以金字塔顶为第一层,第i层有i个落点,每个落点有若干 ...
- AI 2021 年度报告
建议大伙有空还是自己亲自读一下,虽然有点长,188页ppt. https://docs.google.com/presentation/d/1bwJDRC777rAf00Drthi9yT2c9b0Ma ...
- JavaFile I/O流
Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类 ...