DOM22---下拉菜单实现颜色的改变

最新推荐文章于 2022-03-21 14:40:20 发布

onyas

最新推荐文章于 2022-03-21 14:40:20 发布

阅读量821

点赞数

分类专栏： DOM 文章标签：下拉菜单的改变事件还有选中的index和得到所有的opti

本文链接：https://blog.csdn.net/zheng0518/article/details/9074019

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

涉及的知识点有：

1、下拉菜单的改变事件，还有选中的index和得到所有的option

如下图所示：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<link rel="stylesheet" type="text/css" href="table.css">
		<title></title>
		<style type="text/css">
			.clrclass
			{
				height:50px;
				width:50px;
				float:left;
				margin-right:30px;
			}
			#text
			{
				clear:left;
				margin-top:20px;
			}
		</style>
		<script type="text/javascript">
			function chgColor(node)
			{
				var colorVal = node.style.backgroundColor;
				document.getElementById("text").style.color=colorVal;
			}
		</script>
	</head>
	<body>
		<div class="clrclass" id="clr1" style="background-color:red" οnclick="chgColor(this)"></div>
		<div class="clrclass" id="clr2" style="background-color:green" οnclick="chgColor(this)"></div>
		<div class="clrclass" id="clr3" style="background-color:blue" οnclick="chgColor(this)"></div>
		<div id="text">
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
		</div>
		<hr/>
		<script type="text/javascript">
			function changeColor()
			{
				var oSelectNode = document.getElementsByName("clrselect")[0];
				var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value; 
				document.getElementById("text").style.color=colorVal;
			}
		</script>
		<select name="clrselect" οnchange="changeColor()">
			<option value="black">--选择颜色--</option>
			<option value="red">红色</option>
			<option value="green">绿色</option>
			<option value="blue">蓝色</option>
		</select>
	</body>
</html>