小程序开发公司：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
