999国产精品999久久久久久,中文天堂

[轉(zhuǎn)帖]js自定義屬性的操作以及相關(guān)案例

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

liguoquan

2024年3月8日 14:54 本文熱度 1553

：js自定義屬性的操作以及相關(guān)案例

自定義屬性的操作

1.獲取屬性值

element.屬性獲取屬性值
element.getAttribute(‘屬性’);

解釋<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ū)別：

element.屬性獲取內(nèi)置屬性值（元素本身自帶的屬性）
element.getAttribute(‘屬性’); 主要獲得自定義的屬性（標(biāo)準(zhǔn)）我們程序員自定義的屬性。

2.設(shè)置屬性值

element.屬性=‘值’設(shè)置內(nèi)置屬性值。
element . setAttribute(‘屬性’，‘值’) ;

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欄切換（重點(diǎn)案例）

當(dāng)鼠標(biāo)點(diǎn)擊上面相應(yīng)的選項(xiàng)卡（tab）,下面內(nèi)容跟隨變化

案例分析：

Tab欄切換有2個大的模塊
上的模塊選項(xiàng)卡,點(diǎn)擊某一個，當(dāng)前這一個底色會是紅色，其余不變(排他思想)修改類名的方式
下面的模塊內(nèi)容,會跟隨上面的選項(xiàng)卡變化。所以下面模塊變化寫到點(diǎn)擊事件里面。
規(guī)律:下面的模塊顯示內(nèi)容和上面的選項(xiàng)卡-對應(yīng) ,相匹配。
核心思路:給.上面的tab_ list 里面的所有小i添加自定義屬性，屬性值從0開始編號。
當(dāng)我們點(diǎn)擊tab_ list里面的某個小i，讓tab_ .con 里面對應(yīng)序號的內(nèi)容顯示，其余隱藏(排他思想)

解釋<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>手機(jī)社區(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">
               手機(jī)社區(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)綁定點(diǎ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>