点击显示消失效果

最新推荐文章于 2023-03-07 20:15:38 发布

Venciki

最新推荐文章于 2023-03-07 20:15:38 发布

阅读量866

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/89928077

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

我们写下这么一串代码 ( 行内 js 的代码 )：

<html>
<head>
<style>
#div1{
height:100px;
width:100px;
background-color:#f40;
}
.box{
height:200px;
width:200px;
background-color:green;
}
</style>
</head>
<body>
<div id = "div1" onmouseover = "document.getElementById('div1').className='box'" onmouseout="document.getElementById('div1').className=' '">
</div>
</body>
</html>

这段代码的意思是当我鼠标以上 id 名为 div1 的 div 上去这个 div 的样式就会变为 class 名为 box 的 div 的样式。而这些 js 代码都是写在行内的多段 js 代码写在行内不好看，这时候我们就可以用用< script >标签配合着 var 声明变量来写 js 代码。：

<html>
<head>
<style>
#div1{
height:100px;
width:100px;
background-color:#f40;
}
.box{
height:200px;
width:200px;
background-color:green;
}
</style>
<script>
function myid(){
	var Over=document.getElementById('div1');
	Div.className='box';
}
function myod(){
	var Out=document.getElementById('div1');
	Out.className='box';
}
</script>
</head>
<body>
<div id = "div1" onmouseover = "myid()" onmouseout="myod()">
</div>
</body>
</html>

这这修改之后，代码会看着很舒服

javascript简单运用

我们在做一个简单的菜单的时候，可以通过 js 代码来改变菜单的 display 的值（“block”“none”）来控制菜单的显示与隐藏。

例如:做一个简单的菜单：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>简单菜单</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			color: black;
		}
		#box{
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -25px;
			margin-top: -150px;
			transform: 
		}
		#ul1{
			height: 105px;
			width: 50px;
			border: 1px solid #f40;
			text-align: center;
			
		}
		a{
			text-decoration: none;
		}
		li{
			list-style: none;
		}
	</style>
	<script type="text/javascript">
		window.onload=function() {
			var oBut=document.getElementById('but');
			var oUl1=document.getElementById('ul1');
			oBut.onclick=function(){
				if (oUl1.style.display=='block') {
					oUl1.style.display='none';
				}
				else{
					oUl1.style.display='block';
				}
			};
		};
	</script>
</head>
<body>
	<div id="box">
		<p id="but">输入法<img src="https://img-blog.csdnimg.cn/20190506185744824.jpg"style="margin-left: 4px;"></p>
		<ul id="ul1" style="display: block;">
			<li><a href="#">手写</a></li>
			<li><a href="#">拼音</a></li>
			<li><a href="#">九键</a></li>
			<li><a href="#">关闭</a></li>
			<li><a href="#">关闭</a></li>
		</ul>
	</div>
</body>
</html>

效果：

在这里插入图片描述

当点击 “输入法” 的时候，这时候系统会做一个判断，先检查一下他下面这个 ul 的display 值是否是 “block” 是的话，点击之后整个 ul 的 display 的值变为 “none”（说简单点就是消失）；否则（当 ul 的 display 的值为 “none” 的时候之就会变为 "block"让他显示出来。）

这里 windows.οnlοad=function 的功能是在也面加载完之后再执行这一段代码。

Venciki

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击显示消失效果

我们写下这么一串代码 ( 行内 js 的代码 )：<html><head><style>#div1{height:100px;width:100px;background-color:#f40;}.box{height:200px;width:200px;background-color:green;}</style>&...
复制链接

扫一扫