DOM（三）-04-(示例-下拉菜单-选择颜色)

最新推荐文章于 2024-06-19 15:02:54 发布

wy_0928

最新推荐文章于 2024-06-19 15:02:54 发布

阅读量915

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810983

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

程序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>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（三）-04-(示例-下拉菜单-选择颜色)

程序1 .clrclass{ height:50px; width:50px; float:left;/*所有色块区域左漂浮，即从左到右依次排列*/ margin-right:30px;/*每个色块的右边外边距，即与右边色块的距离*/ }
复制链接

扫一扫

专栏目录