用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变

用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>文档标题</title><style type="text/css">*{margin:0;padding:0;}#con{width:500px;height:500px;background:pink;border:1px solid #000;margin:100px auto;}#blue{background:blue;}#green{background:green;}#red{background:red;}</style>
</head>
<body><div id="con"><button id="blue">蓝色</button><button id="green">绿色</button><button id="red">红色</button></div>
</body>
</html>
<script type="text/javascript">var blue = document.getElementById('blue');var con = document.getElementById('con');blue.onclick = function(){con.style.background = 'blue';}var green = document.getElementById('green');green.onclick = function(){con.style.background = 'green';}var red = document.getElementById('red');red.onclick = function(){con.style.background = 'red';}</script>

1.开始的页面如图所示：

2.当单机“蓝色按钮”下面的背景颜色变为蓝色

3.当单机“绿色按钮”下面的背景颜色变为绿色

4.当单机“红色按钮”下面的背景颜色变为红色

用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变相关推荐

原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
jq实现点击一个按钮，触发另一个点击事件（点击按钮触发另一个按钮的点击事件）
jq实现点击一个按钮,触发另一个点击事件 $("#a").click(function(){$("#b").trigger('click');}) 实现点击完i ...
vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法
最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的.经过一番研究才发现是vue事件点击穿透引起 ...
Creator新手引导 | 限制只能点击一个按钮 | 文字打字机效果
效果实现这个非常简单巧妙源码在文末实现思路节点有点多,一个一个讲解下 bg是游戏背景图,主要是为了和灰黑色的遮罩区别 Btn_parent是三个按钮的父节点,加了一个layout,使每个按钮不 ...
MFC 点击一个按钮去触发DATE TIME PICKER的DTN_DROPDOWN事件
转自:https://zhidao.baidu.com/question/135291549740469005.html 我想点击一个button控件去把date time picker控件的下拉框给 ...
【Vue已解决】当点击某个遍历出来的元素并修改背景颜色且唯一，通过ref获取dom节点再操作
目录解决问题的过程问题描述做的一些尝试解决方法(ref) 代码片解决问题的过程该小文本着记录在工作中学习和解决问题的思路,并非最佳方式. 问题描述在使用 Vue+ElementUI 开发 ...
jquery 打开服务器文件管理,javascript - 前端js如何封装一个方法或者是jQuery的插件实现点击一个按钮打开本地文件管理系统，进行上传文件...
世界只因有你2017-05-16 13:38:563楼前段时间封装的一个方法,使用ajax和formData方法,实现文件上传,在上传的过程中显示上传进度 js $('#upload').on('c ...
原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏...
<!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...
如何禁止用户连续点击一个按钮事件详细JS
<input type="button" id="submit" value="提交"> <script> $(do ...
点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
<input id="btnClick" type="button" value="原生写法" class="btn-gre ...

用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变

用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变相关推荐

最新文章

热门文章