程序1
<!--
下拉菜单的应用:
选择颜色,比如有一件衣服,选择不同的颜色会给这衣服上对应的颜色
-->
<html>
<head>
<style type="text/css">
.clrclass{
height:50px;
width:50px;
float:left;/*所有色块区域左漂浮,即从左到右依次排列*/
margin-right:30px;/*每个色块的右边外边距,即与右边色块的距离*/
}
#text{
clear:left;/*清除id="text"区域的左漂浮效果*/
margin-top:20px;/*距离上边的外边距,即与色块之间的距离*/
}
</style>
</head>
<body>
<script type="text/javascript">
function changeColor(node){//接收当前调用该function的节点对象,这里有三个节点对象,他们在页面中呈现的颜色分别是红、绿、蓝
var colorVal = node.style.backgroundColor;//记录下接收到节点的颜色属性
//将接收到的node的颜色“传”给显示区域(即最后一个div区域)
document.getElementById("text").style.color = colorVal;
}
</script>
<div class="clrclass" id="color1" style="background-color:red" οnclick="changeColor(this)"></div>
<div class="clrclass" id="color2" style="background-color:green" οnclick="changeColor(this)"></div>
<div class="clrclass" id="color3" style="background-color:blue" οnclick="changeColor(this)"></div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
</body>
</html>
程序2
<!--
用下拉菜单做同样效果,即选择颜色
-->
<html>
<head>
<style type="text/css">
.selectclass{
width:130px;
}
</style>
</head>
<body>
<script type="text/javascript">
function changColor(){
//获取SelectNode节点对象,为了下面获取所有option节点
var oSelectNode = document.getElementsByName("selectcolor")[0];
/*
*怎么获取option节点对象呢?一个select里面有多个option节点,那么去DHTML API文档中找到select对象,在
*其内的集合一栏有个options:获取 select 对象中 option 对象的集合。
*这个select中的options就可以拿到所有options节点对象(类似table里面的rows)
*/
/*
*如何知道当前哪个选项被选中?即用户选的是哪个option?
*
*在DHTML API文档中找到select对象,其内有如下属性:
* selectedIndex:设置或获取选中选项位于 select 对象中的位置。
*这个属性就可以获取哪个option被选中。【注意】获取到的是被选中option对应的编号,编号从0开始,即第一个option是编号0
*/
//通过以上注释,有如下代码:
var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
/*
*对上一行代码解释如下:
*oSelectNode是select节点对象,options是获取其内所有options节点对象,通过selectedIndex可以知道当前被选中的
*option的编号,所以oSelectNode.selectedIndex是获取被选中的option的编号,
*所以oSelectNode.options[oSelectNode.selectedIndex]是获取当前被选中的option节点对象,然后拿到其value。
*/
//alert(colorVal);
//将选中的option对应的效果显示在div区域
document.getElementById("text").style.color = colorVal;
//style是其样式,然后color是其中一种样式,详见DHTML API中div对象中的样式中的color,其内有示例
}
</script>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
<hr/>
<!--
制作下拉菜单及其可选项目
【注意】事件源是下拉菜单,即select节点,事件是改变颜色,处理方式是通过选择下拉菜单中的项目来改变div区域的颜色,
但是这里不能再用onclick触发事件,因为onclick是鼠标点击出发,这个下拉菜单不是靠点击,而是靠选择,所以这里介绍一个
新的触发事件方式:onchange,意思是下拉菜单必须有变化才触发事件(如这里选择:红色,下拉菜单内容不再是“选择颜色”,
而是“红色”)
【总之】onchange只要一直选同一个,事件永远不触发,只有选不同的才触发事件
-->
<select name="selectcolor" οnchange="changColor()" class="selectclass">
<option value="black">---选择颜色---</option>
<option value="red"style="background-color:red">红色</option>
<option value="green" style="background-color:green">绿色</option>
<option value="blue" style="background-color:blue">蓝色</option>
</select>
</body>
</html>