标签：javascript html
这是一个简单的DOm模型的应用：
效果图：
a:原始状态： b:点击红色区域之后
c:点击下拉框之后的字体颜色变化
具体的介绍:
这个就是点击上方的颜色块，能够使字体出现不同的颜色
1，首先采用div对象，属性里面含有onclick对象
然后设置：var col=node.style.backgroundColor;
document.getElementById("divid").style.color=col;
2，在select中触发的时间必须有事件 onchange="changcolor2()" 使用
在var nodes=document.getElementsByName("selectname")[0];//获得select对象
var text=document.getElementById("divid");//设置的对象
var col=nodes.value;
text.style.color=col;
注意：获得下拉框中的数据，要通过<selelct>中获取value值
下拉框如何获得value值代码：
<span style="white-space:pre"> </span>function changcolor2(){
var nodes=document.getElementsByName("selectname")[0];//获得select对象
var text=document.getElementById("divid");//设置的对象
var col=nodes.value;
text.style.color=col;
通过<select>标签中设置的value值获取，直接设置text的css背景。
<body>样式代码
<div style="background-color:red" onclick="changcolor(this)"></div>
<div style="background-color:blue" onclick="changcolor(this)"></div>
<div style="background-color:green" onclick="changcolor(this)"></div>
<hr style="clear:left;"/>
<div id="divid">
显示效果文字11<br/>
显示效果文字22<br/>
显示效果文字33<br/>
显示效果文字44<br/>
<img src="3.jpg" alt="图片" />
</div>
<br/>
<hr style="clear:left;"/>
<select name="selectname" onchange="changcolor2()">
<option value="block" style="background-color:block" >----请选择----</option>
<option value="red" style="background-color:red">红色</option>
<option value="green" style="background-color:green">绿色</option>
<option value="blue" style="background-color:blue"></option>
</select>
其余通过事件触发和样式的设置就可以实现功能
完整代码
<!DOCTYPE html>
<html>
<head>
<!--
这个就是点击上方的颜色块，能够使字体出现不同的颜色
1，首先采用div对象，属性里面含有onclick对象
然后设置：var col=node.style.backgroundColor;
document.getElementById("divid").style.color=col;
2，在select中触发的时间必须有事件 onchange="changcolor2()" 使用
在var nodes=document.getElementsByName("selectname")[0];//获得select对象
var text=document.getElementById("divid");//设置的对象
var col=nodes.value;
text.style.color=col;
这样进行设置
-->
<title>select.html</title>
<style type="text/css">
div{
width:150px;
height:60px;
margin:10px;
float:left;
margin-bottom:40px;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function changcolor(node){
var col=node.style.backgroundColor;
document.getElementById("divid").style.color=col;
}
function changcolor2(){
var nodes=document.getElementsByName("selectname")[0];//获得select对象
var text=document.getElementById("divid");//设置的对象
var col=nodes.value;
text.style.color=col;
//有关select组件的一些功能演示:手动获取组合框当中的相关信息
// var collOptionNodes = oSelectNode.options;//所有的选项集合
/*
for(var x=0; x<collOptionNodes.length; x++){
alert(collOptionNodes[x].innerHTML);
}
*/
//可以通过select对象获得用户当前所选择的选项序号
//alert(oSelectNode.selectedIndex);
//alert(collOptionNodes[oSelectNode.selectedIndex].innerHTML);
}
</script>
</head>
<body>
<div style="background-color:red" onclick="changcolor(this)"></div>
<div style="background-color:blue" onclick="changcolor(this)"></div>
<div style="background-color:green" onclick="changcolor(this)"></div>
<hr style="clear:left;"/>
<div id="divid">
显示效果文字11<br/>
显示效果文字22<br/>
显示效果文字33<br/>
显示效果文字44<br/>
<img src="3.jpg" alt="图片" />
</div>
<br/>
<hr style="clear:left;"/>
<select name="selectname" onchange="changcolor2()">
<option value="block" style="background-color:block" >----请选择----</option>
<option value="red" style="background-color:red">红色</option>
<option value="green" style="background-color:green">绿色</option>
<option value="blue" style="background-color:blue"></option>
</select>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。希望大家多指教指教
标签：javascript html
原文地址：http://blog.csdn.net/yangxin_blog/article/details/49382601
