小程序開發公司：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