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

最新推荐文章于 2023-05-28 13:39:02 发布

大z小z

最新推荐文章于 2023-05-28 13:39:02 发布

阅读量470

点赞数

分类专栏： dhtml 文章标签： dhtml select

本文链接：https://blog.csdn.net/qq_36171618/article/details/72420698

版权

dhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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" οnchange="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" οnchange="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" ο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>

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