简单描述演示内容:
1.页面内又三个颜色快,和文字,当你点击颜色,文字的颜色会改变,变成和所点击的颜色相同
2.会有下拉框,里面有颜色选项,选择什么颜色,文字就以该颜色显示
3.同二类似,但是下拉显示加上了演示
`
<!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">
.clscolor{
width: 150px;
height: 150px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
}
#text1{
clear: left;
font-size: 18pt;
f
}
</style>
<script type="text/javascript">
function changeC(odivNode){
var c = odivNode.style.backgroundColor;
var otextNode = document.getElementById("text1");
otextNode.style.color=c;
}
</script>
</head>
<body>
<div>
<div class="clscolor" id="color1" style="background-color: #cc66ff" onclick="changeC(this)"></div>
<div class="clscolor" id="color2" style="background-color: #33cc00" onclick="changeC(this)"></div>
<div class="clscolor" id="color3" style="background-color: #003300" onclick="changeC(this)"></div>
</div>
<div id="text1">
h湖南城市学院<br/>
湖南城市学院<br/>
湖南城市学院<br/>
湖南城市学院<br/>
</div>
<hr>
<!--onchange事件只有在选项值有变化时才会触发,而onclick事件在每次点击时都会触发 -->
<select name="selcolor" onchange="changerC2(this)">
<option value="black">--选择颜色--</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<script type="text/javascript">
function changerC2(oSelectNode){
//alert("aa");
/*附加知识点:获取下拦菜单(下栏框)中的所有选项
var oCollOptions = oSelectNode.options;
for(var i=0;i<oCollOptions.length;i++){
//alert( oCollOptions[i].value );//value属性
alert( oCollOptions[i].innerHTML );//文本内容
}
*/
var idx = oSelectNode.selectedIndex;//当前用户选中选项的序号
// alert( oSelectNode.options[idx].innerHTML );
var c= oSelectNode.options[idx].value;
document.getElementById("text1").style.color=c;
}
</script>
<hr>
<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>
<script type="text/javascript">
function changeColor3(oSelectNode){
var idx = oSelectNode.selectedIndex;//当前用户选中选项的序号
var c= oSelectNode.options[idx].style.backgroundColor;
document.getElementById("text1").style.color=c;
}
</script>
</body>
</html>