IDEA激活码
CSS布局中的两个属性
加入clear属性之前：
加入clear属性之后：
下拉列表改变文本颜色
在下拉列表中选择什么颜色，就会使文本显示什么颜色。
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.colorclass{
height: 50px;
width: 50px;
float: left;
margin-right: 30px;
}
#text{
clear: left;
margin: 20px;
}
</style>
<script type="text/javascript">
function changeColor(node){
document.getElementById("text").style.color=node.style.backgroundColor;
}
function changeColor2() {
var selectNodes = document.getElementsByName("selectColor")[0];
//获取所有的option
// var optionNodes = selectNodes.options;
// alert(selectNodes.options[selectNodes.selectedIndex].innerHTML);
//上面代码可改写为：
// with(selectNodes){
// var optionNodes = options;
// alert(options[selectedIndex].innerHTML);
// }
var colorValue = selectNodes.options[selectNodes.selectedIndex].id.ba;
document.getElementById("text").style.color=colorValue;
}
</script>
</head>
<body>
<div class="colorclass" id="color1" style="background-color: bisque" onclick="changeColor(this)"></div>
<div class="colorclass" id="color2" style="background-color: plum" onclick="changeColor(this)"></div>
<div class="colorclass" id="color3" style="background-color: #81a9ae" onclick="changeColor(this)"></div>
<div id="text">
需要显示的文字<br>
需要显示的文字<br>
需要显示的文字<br>
需要显示的文字<br>
需要显示的文字<br>
</div>
<hr>
<!--
下拉菜单使用事件不是onclick而是onchange
只有改变才能触发事件，选择同一个不会触发事件
-->
<select name="selectColor" onchange="changeColor2()">
<option value="black">选择颜色</option>
<option value="bisque">浅黄色</option>
<option value="plum">粉色</option>
<option value="#81a9a1">蓝色</option>
</select>
</body>
</html>
