需求说明:
使用 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>