小程序开发公司：www.zkelm.com
接下来准备学习10天左右的 javascriptDom操作，对javascript对 html元素的一种操作理解。 之后重新回到Vue 等框架开发上面去攻坚，很多东西看着挺理解，但是一做起来还是懵逼。而且我要是被卡住我就会一直挖。
第1天的Dom操作教程， 以一个简单的 pink讲师的隐藏显示操作。如图
点击之后就会隐藏掉内容
首先我们下先要建立一个DIV来撞住这两个元素 div 框住 input 和span代码如下
<div class="box">
<input type="text" value="南宁小程序开发公司:www.zkelm.com"/><span>显示</span>
</div>
显示效果如下
我们来美化一下，加入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;
}
显示效果：
下面写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
