[轉(zhuǎn)帖]js自定義屬性的操作以及相關(guān)案例
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
:js自定義屬性的操作以及相關(guān)案例 自定義屬性的操作1.獲取屬性值
解釋<body> <div id="demo" index="1"></div> <script> var div = document.querySelector('div'); //1.獲取元素的屬性值 //(1)element.屬性 console.log(div.id); //(2)elemnt.getAttribute('屬性') get得到獲取attribute屬性的意思 自己添加的屬性稱為自定義屬性index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); </script></body> 區(qū)別:
2.設(shè)置屬性值
3.移除屬性removeAttribute(屬性)解釋<body> <div id="demo" index="1"></div> <script> var div = document.querySelector('div'); //1.獲取元素的屬性值 //(1)element.屬性 console.log(div.id); //(2)elemnt.getAttribute('屬性') get得到獲取attribute屬性的意思 自己添加的屬性稱為自定義屬性index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); //2.設(shè)置元素屬性值 // (1)element.屬性='值' div.id = 'test'; div.className = 'navs'; //(2)element . setAttribute('屬性','值') ; 主要針對自定義屬性 div.setAttribute('index',2); div.setAttribute('class','footer'); //class 特殊 這里面寫的就是class 而不是className //3.移除屬性removeAttribute(屬性) div.removeAttribute('index'); </script></body> 案例:tab欄切換(重點案例)
** 案例分析:**
解釋<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_info { padding: 20px 0 0 20px; } .item { display: none; } </style> </head><body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介紹</li> <li>規(guī)格與包裝</li> <li>售后保障</li> <li>商品評價(50000)</li> <li>手機社區(qū)</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介紹模塊內(nèi)容 </div> <div class="item"> 規(guī)格與包裝模塊內(nèi)容 </div> <div class="item"> 售后保障模塊內(nèi)容 </div> <div class="item"> 商品評價(50000)模塊內(nèi)容 </div> <div class="item"> 手機社區(qū)模塊內(nèi)容 </div> </div> </div></head><body> <script> //1.獲取元素 var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); //for循環(huán)綁定點擊事件 for(var i = 0; i<lis.length; i++){ //開始給5個小li 設(shè)置索引號 lis[i].setAttribute('index',i); lis[i].onclick = function(){ //干掉所有人 其余的li清除 class 這個類 for(var i = 0; i<lis.length; i++){ lis[i].className = ''; } //留下我自己 this.className = 'current'; //2.下面的顯示內(nèi)容模塊 var index = this.getAttribute('index'); console.log(index); //干掉所有人 讓其余的item 這些div隱藏 for(var i = 0; i < items.length; i++){ items[i].style.display='none'; } items[index].style.display = 'block'; } } </script> </body> H5自定義屬性
1.設(shè)置H5自定義屬性
2.獲取H5自定義屬性1.兼容性獲取 element.getAttribute(‘data-index’ ); 該文章在 2024/3/8 14:54:56 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |