下拦菜单技术演示---修改文本颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下拦菜单技术演示</title>

<style type="text/css">
#cc{
font-size:20px;
}
#div1{
font-size:20px;
font-family:黑体;
clear:left;
}
#sel3{
font-size:20px;
}
.clrclass{
height: 40px;
width: 50px;
margin-right: 30px;
margin-bottom:20px;
float:left;
}
</style>
</head>
<body>
<h1>请选择一种颜色</h1>
<h2>以下三个模块单独控制，互不干扰</h2>
<select name="selColor" onchange="changeColor2(this)" id = "cc">//onchange是改变以后才回去触发执行
<option value="black" >--选择颜色--</option>
<option value ="red">红色</option>
<option value ="green">绿色</option>
<option value ="blue">蓝色</option>
</select>

<br/><br/><br/>

<select id="sel3" name="selColor2" onchange="changeColor3(this)">
<option value="black" >--选择颜色--</option>
<option style ="background-color:red" value ="red">红色</option>
<option style ="background-color:green" value ="green">绿色</option>
<option style = "background-color:blue" value ="blue">蓝色</option>
</select>

<br/><br/><br/>

<div class ="clrclass" id = "color1" style = "background-color:red" onclick="changeColor(this)"></div>
<div class ="clrclass" id = "color2" style = "background-color:green" onclick="changeColor(this)"></div>
<div class ="clrclass" id = "color3" style = "background-color:blue" onclick="changeColor(this)"></div>

<script type="text/javascript">

function changeColor(node){
var c= node.style.backgroundColor;
document.getElementById("div1").style.color=c;
}

function changeColor2(oSelectNode){
var idx = oSelectNode.selectedIndex;
var c= oSelectNode.options[idx].value;
document.getElementById("div1").style.color=c;
}

function changeColor3(oSelectNode){
var idx2= oSelectNode.selectedIndex;
var c= oSelectNode.options[idx2].value;
document.getElementById("div1").style.color=c;
}

</script>
<br/><br/>
<div id ="div1">
测试文本1<br/>
测试文本2<br/>
测试文本3<br/>
</div>

</body>

</html>

下拦菜单技术演示---修改文本颜色

下拦菜单技术演示---修改文本颜色

相关推荐