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

最新推荐文章于 2022-08-23 17:23:05 发布
最新推荐文章于 2022-08-23 17:23:05 发布
阅读量2.9k 收藏 1
点赞数 2
分类专栏： javascript JavaScript实例 Java学习之路 文章标签： JavaScript HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxin_blog/article/details/49382601
版权

这是一个简单的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>




learning_code_blog
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript详解(第2版)
04-25
第1章　JavaScript简介　1 1.1　JavaScript是什么　1 1.2　JavaScript不是什么　2 1.3　JavaScript的用处　3 1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　JavaScript及其在Web开发中承担的角色　7 1.8　JavaScript和事件　9 1.9　标准化JavaScript和W3C　11 1.9.1　JavaScript对象　12 1.9.2　文档对象模型　12 1.10　关于浏览器　13 1.10.1　JavaScript的版本　14 1.10.2　你的浏览器遵循标准吗　16 1.10.3　浏览器是否已启用JavaScript　16 1.11　JavaScript代码放在哪儿　17 1.12　验证标签　20 1.12.1　W3C验证工具　21 1.12.2　Validome验证工具　21 1.13　应知应会　22 练习　23 第2章　脚本的安装　24 2.1　HTML文档与JavaScript　24 2.2　语法细节　27 2.2.1　区分大小写问题　27 2.2.2　自由形式及保留字　27 2.2.3　语句及分号　28 2.2.4　注释　28 ... 2.2.5　〈script〉标签　 　　2.3　生成HTML　并输出显示　 　　2.3.1　字符串及字符串串联　 　　2.3.2　write()及writeln()方法　 　　2.4　关于调试　 　　2.5　调试工具　 　　2.5.1　Firefox　 　　2.5.2　在Internet　Explorer　8中调试　 　　2.5.3　[removed]URL　协议　 　　2.6　JavaScript与旧浏览器或受限的浏览器　 　　2.7　应知应会　 　　练习　 　　第3章　数据类型、字面量和变量　 　　3.1　数据类型　 　　3.1.1　基本数据类型　 　　3.1.2　复合数据类型　 　　3.2　变量　 　　3.2.1　有效变量名　 　　3.2.2　声明和初始化变量　 　　3.2.3　动态或宽松类型语言　 　　3.2.4　变量作用域　 　　3.2.5　变量的拼接　 　　3.3　常量　 　　3.4　要注意的bug　 　　3.5　应知应会　 　　练习　 　　第4章　对话框　 　　4.1　与用户交互　 　　4.1.1　alert()方法　 　　4.1.2　prompt()方法　 　　4.1.3　confirm()方法　 　　4.2　应知应会　 　　练习　 　　第5章　运算符　 　　5.1　JavaScript运算符和表达式　 　　5.1.1　赋值运算符　 　　5.1.2　优先级和结合性　 　　5.2　运算符类型　 　　5.2.1　算术运算符　 　　5.2.2　快捷赋值运算符　 　　5.2.3　递增运算符和递减运算符　 　　5.2.4　拼接运算符　 　　5.2.5　比较运算符　 　　5.2.6　逻辑运算符　 　　5.2.7　条件运算符　 　　5.2.8　位运算符　 　　5.3　数字、字符串还是布尔值？数据类型转换　 　　5.3.1　parseInt()函数　 　　5.3.2　parseFloat()函数　 　　5.3.3　eval()函数　 　　5.4　特殊运算符　 　　5.5　应知应会　 　　练习　 　　第6章　条件选择　 　　6.1　控制结构、块及复合语句　 　　6.2　条件　 　　6.2.1　if/else　 　　6.2.2　if/else　if　 　　6.2.3　switch　 　　6.3　循环　 　　6.3.1　while循环　 　　6.3.2　do/while循环　 　　6.3.3　for循环　 　　6.3.4　for/in循环　 　　6.3.5　使用break和continue控制循环　 　　6.3.6　嵌套循环及标签　 　　6.4　应知应会　 　　练习　 　　第7章　函数　 　　7.1　什么是函数　 　　7.1.1　函数声明和调用　 　　7.1.2　返回值　 　　7.1.3　匿名函数变量　 　　7.1.4　闭包　 　　7.1.5　递归　 　　7.1.6　函数是对象　 　　7.2　调试技巧　 　　7.2.1　函数语法　 　　7.2.2　使用try/catch和throw捕捉异常　 　　7.3　应知应会　 　　练习　 　　第8章　对象　 　　8.1　什么是对象　 　　8.1.1　对象及点语法　 　　8.1.2　使用构造函数创建对象　 　　8.1.3　对象的属性　 　　8.1.4　对象的方法　 　　8.2　类和用户自定义函数　 　　8.2.1　什么是类　 　　8.2.2　什么是this　 　
颜色分块div
......
08-08 659
在做网页分块时，常常要用常用颜色来分块儿，以标出设定的div范围，常用颜色有： red(红), white(白),black(黑),green(绿),yellow(黄),blue(蓝),purple(紫),gray(灰),brown(棕),tan(褐色),syan(青色)。
二十二、点击变颜色
一个孤独漫步者的遐想的博客
05-30 166
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击变颜色</title> <!-- IMPORT CSS--> <style> * { margin: 0; padding: 0; }
html怎么出现颜色块,Html实现动态显示颜色块的报表效果代码分享
weixin_39616565的博客
06-25 708
Html实现动态显示颜色块的报表效果代码分享发布时间：2020-04-11 14:24:23来源：亿速云阅读：597作者：小新今天小编给大家分享的是Html实现动态显示颜色块的报表效果代码，很多人都不太了解，今天小编为了让大家更加了解Html如何实现动态显示颜色块的报表效果，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。利用html的颜色块动态展示数据*{padding: 0;mar...
【JS】跟随鼠标点击产生随机的颜色小方块
xxxxxwxx的博客
08-23 376
鼠标点哪里，哪里就出现颜色大小随机的小方块。
DOM操作案例1-点击，使表格的颜色切换（点击单元格，整行或整列颜色切换）
qq_58167492的博客
07-15 299
DOM操作案例-点击，使表格的颜色切换（点击单元格，整行或整列颜色切换）
HTML 颜色块图标
weixin_33813128的博客
05-18 2831
html颜色块图标醒目大方。 本文详解颜色块图标的CSS实现。 设计界面元素 在把主页面的 html 的元素规定好。主要由四个图标组成。如下： <body> <div class="container"> <div class="bgblue"> 0#柴油<br/><h1>7.84&lt...
制作好看又非常简单CSS样式的颜色块
qq_28499043的博客
08-25 1万+
在这里我将我最近学到的CSS样式的渐变颜色块记录下来
js实现的调色板（改进后）
08-05
利用js弹出调色板，很适用！（此代码是本人上一个资源后的改进版，其中含有详细的注释，有什么建议或疑问欢迎大家提出。希望和大家互相学习沟通）
Ext Js权威指南(.zip.001
09-26
10.2.5　设置行的背景颜色 / 532 10.2.6　列标题的分组 / 533 10.2.7　使用锁定列 / 534 10.2.8　grid的配置项、属性、方法和事件 / 535 10.3　grid的附加功能 / 537 10.3.1　概述 / 537 10.3.2　附加功能基类：ext....
编译的 HTML 帮助文件 (.chm) DHTML手册
03-10
XMLDocument 获取对由对象引出的的 XML 文档对象模型(DOM)的引用。 XSLDocument 获取对 XSL 文档的顶层结点的引用。 属性 集合 集合 描述 all 返回对象所包含的元素集合的引用。 anchors 获取所有带有 ...
vc++ 应用源码包_1
09-15
内部包含：mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 MFC_MultiSender_OVER 文件传送，多文件（超大文件）传送功能的实现，含文档。 ...
6个div块,随机颜色
Endeavor_No1的博客
03-15 4519
参加工作以后，基本用到的都是react，最近老大要求用h5+mui做出一款app,制作过程中发现很多原生js已经不熟悉，看来js基础忘得都差不多了，需要补习了。app中有一个要求是页面对应的几个模块每次打开都要显示不同的随机颜色。我就封装成了一个函数，有不足的地方，还希望多多指点。代码如下。    &lt;div class="giveYouColorSeeSee"&gt;1&lt;/div&gt...
HTML中下拉框的简单介绍＜Select＞＜option＞
热门推荐
yangxin_blog的专栏
10-23 11万+
下拉框在生活中应用很广
react-router-dom react-router-config 安装失败
最新发布
01-13
您可以尝试以下步骤来解决react-router-dom和react-router-config安装失败的问题： 1. 确保您已经正确安装了Node.js和npm。您可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 确保您的项目目录下有一个正确的package.json文件。如果没有，请在终端中导航到项目目录并运行以下命令来创建一个新的package.json文件： ```shell npm init -y ``` 3. 确保您的项目目录下没有其他正在运行的npm进程。您可以尝试关闭终端并重新打开一个新的终端窗口，然后再次尝试安装。 4. 确保您的网络连接正常。有时候安装过程中会因为网络问题而失败。您可以尝试使用其他网络连接或者使用VPN来解决这个问题。 5. 尝试使用npm的镜像源来安装。您可以在终端中运行以下命令来切换到淘宝的镜像源： ```shell npm config set registry https://registry.npm.taobao.org/ ``` 然后再次尝试安装react-router-dom和react-router-config。 如果您仍然遇到问题，请提供更多的错误信息或者详细描述您遇到的具体问题，以便我能够更好地帮助您解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值