JavaScript操作元素例項大全
阿新 • • 發佈:2021-06-15
操作元素內容參考之前文章:javascript WebAPI、DOM、事件、操作元素
案例:顯示隱藏密碼案例
核心思路: (操作表單元素屬性)
- 點選眼睛按鈕,把密碼框型別改為文字框就可以看見裡面的密碼 一個按鈕兩個狀態,
- 點選一次,切換為文字框,繼續點選一次切換為密碼框
- 演算法:利用一個flag變數,來判斷flag的值,如果是1 就切換為文字框,flag 設定為0,如果是0 就切換為密碼框,flag設定為1
<style> .box{ position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input{ width: 370px; height: 30px; border: 0; outline: none; } .box img{ position:absolute; top: 2px; right: 2px; width: 24px; } </style> <body> <div class="box"> <label for=""> <img src="./image/close.png" alt="javaScript操作元素例項大全" id="eye"> </label> <input type="password" name="" id="pwd"> </div> <script> var eye=document.getElementById('eye') var pwd=document.getElementById('pwd') var flag=0 eye.onclick=function(){ //點zyPzEBe擊後 更換文字框型別、圖片及標記值 if(flag==0){ pwd.type='text' eye.src='./image/open.png' flag=1 }else{ pwd.type='password' flag=0 } } </script> </body>
案例:迴圈精靈圖
核心思路: (操作元素樣式)
- 利用for迴圈 修改精靈圖片的 背景位置
- background-position 讓迴圈裡面的 i 索引號 * 44就是每個圖片的y座標
<style> *{ margin: 0; padding: 0; } li{ list-style-type: none; } .box{ width: 250px; margin: 100px auto; } .box li{ margin: 15px; float: left; width: 24px; height: 24px; background: url(./image/sprite.png) no-repeat; } </style> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> // 1. 獲取元素 所有的小li var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { // 讓索引號 乘以 44 就是每個li 的背景y座標 var y = i * 44; lis[i].style.backgroundPosition = '0 -' + y + 'px'; } </script> </body>
案例:密碼框驗證資訊
核心思路:(用className修改樣式屬性)
- 首先判斷的事件是表單失去焦點 onblur
- 如果輸入正確則提示正確的資訊顏色為綠色小圖示變化
- 如果輸入不是6到16位,則提示錯誤資訊顏色為紅色 小圖示變化
- 因為裡面變化樣式較多,採取className修改樣式
<style> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; background: url(./image/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(./image/wrong.png); } .right { color: green; background-image: url(./image/right.png); } </style> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">請輸入6~16位密碼</p> </div> <script> var ipt = document.querySelector('.ipt') var messgae = document.querySelector('.message') ipt.onblur = function () { if (this.value.length < 6 || this.value.length > 16) { messgae.className = 'message wrong' messgae.innerHTML = '您輸入位數不對 要求6~16位' } else { messgae.className = 'message right' messgae.innerHTML = '您輸入的正確' } } </script> </body>
案例:背景換色
核心思想:(操作元素樣式屬性)
給4個小圖片利用迴圈註冊點選事件當點選了這個圖片,讓頁面背景改為當前的圖片核心演算法: 把當前圖片的src 路徑取過來,給body 做為背景即可
<style> *{ margin: 0; padding: 0; } body{ background: url(./image/1.jpg) no-repeat center top; } li{ list-style-type: none; } .tu{ overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .tu li{ float: left; margin: 0 1px; cursor: pointer; } .tu img{ width: 1www.cppcns.com00px; } </style> <body> <ul class="tu"> <li><img src="./image/1.jpg"></li> <li><img src="./image/2.jpg"></li> <li><img src="./image/3.jpg"></li> <li><img src="./image/4.jpg"></li> </ul> <script> //獲取元素 var imgs=document.querySelector('.tu').querySelectorAll('img'); //註冊事件 for(var i=0;i<imgs.length;i++){ imgs[i].onclick=function(){ // this.src路徑給body document.body.style.backg程式設計客棧roundImage='url('+this.src+')'; } } </script> </body>
案例:表格換色
核心思路:(排他思想)
用到新的滑鼠事件 滑鼠經過 onmouseover 滑鼠離開 onmouseout核心思路:滑鼠經過 tr 行,當前的行變背景顏色,滑鼠離開去掉當前的背景顏色注意: 第一行(thead裡面的行)不需要變換顏色,因此獲取的是 tbody 裡面的行
<style> table{ width:800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr{ height: 30px; background-color: skyblue; } tbody tr{ height: 30px; } tbody td{ border-bottom: 1px solid #d7d7d7; font-size: 12px; zyPzEBe color: blue; } .bg{ background-color: pink; } </style> <body> <table> <thead> <tr> <th>程式碼</th> <th>名稱</th> <th>最新公佈淨值</th> <th>累計淨值</th> <th>前單位淨值</th> <th>淨值增長率</th> </tr> </thead> <tbody> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> </tbody> </table> <script> //獲取元素 var trs=document.querySelector('tbody').querySelectorAll('tr') //註冊事件 for(var i=0;i<trs.length;i++){ trs[i].onmouseover=function(){ this.className='bg' } trs[i].onmouseout=function(){ this.className='' } } </script> </body>
案例:表單全選和反選
核心思想:
- 全選和取消全選做法: 讓所有複選框的checked屬性(選中狀態) 跟隨 全選按鈕
- 複選框需要全部選中, 全選才能選中做法:給下面所有複選框繫結點選事件,每次點選,都要迴圈檢視下面所有的複選框是否有沒選中的,如果有一個沒選中的, 上面全選就不選中
- 可以設定一個變數,來控制全選是否選中
<style> *{ padding: 0; margin: 0; } .wrap{ width: 300px; margin: 100px auto 0; } table{ border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th,td{ border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th{ background-color: #09c; font: bold 16px '微軟雅黑'; color: #fff; } td{ font: 14px '微軟雅黑'; } tbody tr{ background-color: #f0f0f0; } tbody tr:hover{ cursor: pointer; background-color: #fafafa; } </style> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="cbAll" /> </th> <th>商品</th> <th>價錢</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> </div> <script> //獲取元素 var cbAll = document.getElementById('cbAll'); //全選按鈕 var tbs = document.getElementById('tb').getElementsByTagName('input'); //所有複選框按鈕 //註冊事件 //全選 cbAll.onclick = function () { for (var i = 0; i < tbs.length; i++) { tbs[i].checked = this.checked; } } //反選 for (var i = 0; i < tbs.length; i++) { tbs[i].onclick = function () { var flag = true //控制全選按鈕 // 每次點選複選框都要檢查是否全選 for (var i = 0; i < tbs.length; i++) { if (tbs[i].checked == false) { flag = false break } } cbAll.checked = flag } } </script> </body>
案例:tab欄切換
核心思想:(排他思想)
- Tab欄切換有2個大的模組
- 上的模組選項卡,點選某一個,當前這一個底色會是紅色,其餘不變(排他思想) 修改類名的方式
- 下面的模組內容,會跟隨上面的選項卡變化。所以下面模組變化寫到點選事件裡面。 規律:下面的模組顯示內容和上面的選項卡一一對應,相匹配
- 核心思路: 給上面的tab_list 裡面的所有小lhttp://www.cppcns.comi 新增自定義屬性,屬性值從0開始編號。
- 當點選tab_list 裡面的某個小li,讓tab_con 裡面對應序號的內容顯示,其餘隱藏(排他思想)
<style> *{ margin: 0; padding: 0; } li{ list-style-type: none; } .tab{ width:978px; margin: 100px auto; } .tab_list{ height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li{ float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current{ background-color: #c81623; color: #fff; } .item{ display: none; } .item_info{ padding: 20px 0 0 20px; } </style> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介紹</li> <li>規格與包裝</li> <li>售後保障</li> <li>商品評價(50000)</li> <li>手機社群</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介紹模組內容 </div> <div class="item"> 規格與包裝模組內容 </div> <div class="item"> 售後保障模組內容 </div> <div class="item"> 商品評價(50000)模組內容 </div> <div class="item"> 手機社群模組內容 </div> </div> </div> <script> //獲取元素 var lis = document.querySelector('.tab_list').querySelectorAll('li'); var items = document.querySelectorAll('.item'); //註冊事件 for (var i = 0; i < lis.length; i++) { //給li元素設定索引號 lis[i].setAttribute('index',i); lis[i].onclick = function () { //選項卡內容 //清除所有li的current類 for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } //給自身新增current類 this.className = 'current'; //顯示內容 var index = this.getAttribute('index'); //清除其餘item的內容 for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } //讓自身item的內容顯示 items[index].style.display = 'block'; } } </script> </body>
總結
到此這篇關於JavaScript操作元素的文章就介紹到這了,更多相關js操作元素內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!