一、需求：点击不同的颜色方框，让文本显示不同的颜色
1）盒子悬浮：float
文字不浮：clear
2）注意平时变量名的取法，color是个关键字
<style type="text/css">
.clrclass
{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
div#text
{
clear:left;
margin-top:60px;
}
</style>
<script type="text/javascript">
function changeColor(node)
{
//获取颜色,注意不能用color，它是关键字
colorVal=node.style.backgroundColor;
//根据id获取文本div
var divNode=document.getElementById("text");
divNode.style.color=colorVal;//设置字体颜色用color属性
}
</script>
</head>
<body>
<div class="clrclass" id="clr1" style="background-color:#F3F" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div id="text">
需要显示的内容<br/>
需要显示的内容<br/>
需要显示的内容<br/>
需要显示的内容<br/>
</div>
</body>
</html>
二、根据下拉菜单选择颜色，给文字内容赋予不同的颜色
下拉菜单标签：select
下拉菜单用到的事件是onchange：当对象或者选中区的内容发生改变是才会触发该事件
获取所有的option：oselected.all（获取的是个集合）
获取哪个被选中：oselected.selectedIndex
<style type="text/css">
#text
{
margin-top:30px;
}
</style>
<script type="text/javascript">
function changeColor(node)
{
alert("颜色改变")
//获取所有的option
var CollOptNodes=node.options;
//获取被选中的索引
var index=node.selectedIndex;
//根据索引获取option对象，并获取其颜色值
var colorVal=CollOptNodes[index].value;
//获取文本对象并赋予颜色
document.getElementById("text").style.color=colorVal;
}
</script>
</head>
<body>
<select name="textColr" onchange="changeColor(this)">
<option value="none" >--选择颜色--</option>
<option value="red" >红色</option>
<option value="blue" >蓝色</option>
<option value="green" >绿色</option>
<option value="black" selected="selected" >黑色</option>
</select>
<div id="text">
需要显示的内容<br/>
需要显示的内容<br/>
需要显示的内容<br/>
需要显示的内容<br/>
</div>
</body>
</html>
