查看本章节

查看作业目录

需求说明：

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

实现思路：

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

实现代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<h1>更改字体颜色和背景颜色</h1>
  9. 		<select id="sel">
  10. 			<option value="bule">蓝色</option>
  11. 			<option value ="red">红</option>
  12. 			<option value="pink">粉</option>
  13. 			<option value="purple">紫</option>
  14. 			<option value="grend">绿</option>
  15. 			<option value="yellow">黄</option>
  16. 			<option value="orange">橙</option>
  17. 		</select>
  18. 		<script type="text/javascript">
  19. 			document.getElementById("sel").onchange=function(){
  20. 				document.bgColor=this.value;
  21. 				document.fgColor=this.value+255;
  22. 			};
  23. 		</script>
  24. 	</body>
  25. </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. 【leetcode】85. Maximal Rectangle（单调栈）

    Given a rows x cols binary matrix filled with 0's and 1's, find the largest rectangle containing onl ...

  2. 通信方案软件设计（环形动态申请内存，支持USART+IIC+SPI+CAN协议

    1 <STM32进阶之串口环形缓冲区实现>中讲得比较清楚(链接) 2 amobbs中讲的方法有点复杂,以下是链接和参考源码: 通信方案软件设计(环形动态申请内存,支持USART+IIC+S ...

  3. JavaIO——System对IO的支持、序列化

    1.系统类对IO的支持 在我们学习PriteWriter.PrintStream里面的方法print.println的时候是否观察到其与我们之前一直使用的系统输出很相似呢?其实我们使用的系统输出就是采 ...

  4. Mysql的行级锁

    我们首先需要知道的一个大前提是:mysql的锁是由具体的存储引擎实现的.所以像Mysql的默认引擎MyISAM和第三方插件引擎 InnoDB的锁实现机制是有区别的. Mysql有三种级别的锁定:表级锁 ...

  5. show processlist命令详解

    1.show processlist; SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此信息.如果您有SUPER权限,您可以看到 ...

  6. SpringMVC(2)：JSON

    一,JSON 介绍 JSON (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效 ...

  7. sql优化的8种方式

    1.设置索引. MySQL索引操作:给表列创建索引: 建表时创建索引: create table t(id int,name varchar(20),index idx_name (name)); 给 ...

  8. 阿里云esc 安装 docker

    1. 更新 yum 到最新: yum update (用 root 用户登录,无需加 sudo,如果不是,需要加,即  yum update ) 2. 安装软件包:yum-util(提供 yum-co ...

  9. java列表组件鼠标双击事件的实现

    Swing中提供两种列表组件,分别是列表框(JList)和组合框(JComboBox). 一.JList组件 构造方法: public JList():构造一个空的.具有只读模型的JList.publ ...

  10. 关于Mysql java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)的问题

    问题所在: 1.连接数据库一个是密码是否正确, 2.driver是否对, 3.有么有jar包冲突,