DOM模型--简单的颜色块显示

最新推荐文章于 2024-04-07 19:24:08 发布

learning_code_blog

最新推荐文章于 2024-04-07 19:24:08 发布

阅读量2.9k

点赞数 2

分类专栏： javascript JavaScript实例 Java学习之路文章标签： JavaScript HTML

本文链接：https://blog.csdn.net/yangxin_blog/article/details/49382601

版权

Java学习之路同时被 3 个专栏收录

47 篇文章 3 订阅

订阅专栏

javascript

14 篇文章 0 订阅

订阅专栏

JavaScript实例

14 篇文章 1 订阅

订阅专栏

这是一个简单的DOm模型的应用：

效果图：

a:原始状态： b:点击红色区域之后

c:点击下拉框之后的字体颜色变化

具体的介绍:

这个就是点击上方的颜色块，能够使字体出现不同的颜色
1，首先采用div对象，属性里面含有onclick对象
然后设置：var col=node.style.backgroundColor;
document.getElementById("divid").style.color=col;
2，在select中触发的时间必须有事件 οnchange="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" οnclick="changcolor(this)"></div>
    <div style="background-color:blue" οnclick="changcolor(this)"></div>
    <div style="background-color:green" οnclick="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" οnchange="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中触发的时间必须有事件  οnchange="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" οnclick="changcolor(this)"></div>
    <div style="background-color:blue" οnclick="changcolor(this)"></div>
    <div style="background-color:green" οnclick="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" οnchange="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>