小程序开发公司,挑战百日学习计划第33天（javascript Dom操作)

最新推荐文章于 2022-04-30 12:04:24 发布

zkelm.com

最新推荐文章于 2022-04-30 12:04:24 发布

阅读量1k

点赞数 3

分类专栏：南宁小程序开发小程序 javascript 文章标签：小程序开发南宁小程序开发南宁软件开发公司

本文链接：https://blog.csdn.net/zkelm/article/details/107118650

版权

小程序同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

南宁小程序开发

25 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

小程序开发公司：www.zkelm.com

接下来准备学习10天左右的 javascriptDom操作，对javascript对 html元素的一种操作理解。之后重新回到Vue 等框架开发上面去攻坚，很多东西看着挺理解，但是一做起来还是懵逼。而且我要是被卡住我就会一直挖。

第1天的Dom操作教程，以一个简单的 pink讲师的隐藏显示操作。如图
小程序开发公司：zkelm.com
点击之后就会隐藏掉内容
小程序开发：zkelm.com

首先我们下先要建立一个DIV来撞住这两个元素 div 框住 input 和span代码如下

<div class="box">
<input type="text" value="南宁小程序开发公司:www.zkelm.com"/><span>显示</span>
</div>

显示效果如下
小程序开发公司：www.zkelm.com

我们来美化一下，加入css代码如下

*{margin:0;padding: 0;}
			.box{
				margin: 10px;
				border:2px solid aqua;
				display: inline-block;
				
			}
			.box span{
			  display: inline-block;	
			  height: 30px;
			  background-color: aqua;
			  line-height: 30px;
			  width:40px;
			  text-align: center;
			  border: 1px solid aqua;
			  font-size:15px;
			  
			}
			.box input{
				width:250px;
				height:30px;
				border:none;
				outline: none;
			}

显示效果：
小程序开发：zkelm.com

下面写js代码， js对Dom操作是重点


function mshow(){
	var myspan=document.querySelector("span");
	var myinput=document.querySelector("input");
	if(myspan.innerText=="隐藏"){
	    myspan.innerText="显示";
		myinput.type="password";
	}else{
		myspan.innerText="隐藏";
		myinput.type="text";
	}
		}

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小程序开发公司：zkelm.com 实例（边框框隐藏显示）</title>
		<style>
			*{margin:0;padding: 0;}
			.box{
				margin: 10px;
				border:2px solid aqua;
				display: inline-block;
				
			}
			.box span{
			  display: inline-block;	
			  height: 30px;
			  background-color: aqua;
			  line-height: 30px;
			  width:40px;
			  text-align: center;			  
			  border: 1px solid aqua;
			  
			}
			.box input{
				width:220px;
				height:28px;
				border:none;
				outline: none;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<input type="text" value="南宁小程序开发公司:www.zkelm.com"/> <span onclick="mshow()">隐藏</span>
		</div>
	</body>
	<script type="text/javascript">
	function mshow(){
	var myspan=document.querySelector("span");
	var myinput=document.querySelector("input");
	if(myspan.innerText=="隐藏"){
	     myspan.innerText="显示";
		 myinput.type="password";
	}else{
		 myspan.innerText="隐藏";
		 myinput.type="text";
	}
		}
	</script>
</html>

南宁小程序开发，企业OA开发：www.zkelm.com

每天进步1%。一直坚持，坚持就会上瘾。哈哈！真happy

zkelm.com

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
小程序开发公司,挑战百日学习计划第33天（javascript Dom操作)

小程序开发公司：www.zkelm.com接下来准备学习10天左右的 javascriptDom操作，对javascript对 html元素的一种操作理解。之后重新回到Vue 等框架开发上面去攻坚，很多东西看着挺理解，但是一做起来还是懵逼。而且我要是被卡住我就会一直挖。第1天的Dom操作教程，以一个简单的 pink讲师的隐藏显示操作。如图点击之后就会隐藏掉内容首先我们下先要建立一个DIV来撞住这两个元素 div input p...
复制链接

扫一扫