日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

setAttribute() 與 getAttribute() 用法剖析及選項卡操作的實例展示，這一篇就夠了

作者：獅子座的男孩 更新時間： 2022-05-10 編程語言

Ⅰ、在 MDN 上 setAttribute() 與 getAttribute() 函數的用法解釋(很詳細)：

1、Element.setAttribute()：

其一、摘要：

設置指定元素上的某個屬性值。如果屬性已經存在，則更新該值；否則，使用指定的名稱和值添加一個新的屬性。
要獲取某個屬性當前的值，可使用 getAttribute()；要刪除某個屬性，可使用 removeAttribute()。

其二、語法：

element.setAttribute(name, value);

參數：
name 表示屬性名稱的字符串；
value 表示屬性的值/新值；

如果指定的屬性已經存在，則其值變為傳遞的值。如果不存在，則創建指定的屬性。

其三、在下面的例子中，setAttribute() 被用于設置

JavaScript

var b = document.querySelector(“button”);

b.setAttribute(“name”, “helloButton”);
b.setAttribute(“disabled”, “”);

代碼說明：

A、上面對setAttribute()的第一次調用顯示了將name屬性的值更改為“ helloButton”。
B、要設置布爾屬性的值（例如禁用），可以指定任何值。 建議使用空字符串或屬性名稱。 重要的是，如果根本不存在該屬性，則不管其實際值如何，都將其值視為真實。 該屬性的缺失表示其值是false。 通過將Disabled屬性的值設置為空字符串（“”），我們將disable設置為true，這將導致按鈕被禁用。

2、Element.getAttribute()：

其一、摘要：

getAttribute() 返回元素上一個指定的屬性值。如果指定的屬性不存在，則返回 null 或 “” （空字符串）；

其二、語法：

let attribute = element.getAttribute(attributeName);

· attribute 是一個包含 attributeName 屬性值的字符串。

· attributeName 是你想要獲取的屬性值的屬性名稱。

其三、例子：

let div1 = document.getElementById(“div1”);
let align = div1.getAttribute(“align”);

alert(align);
// shows the value of align for the element with id=“div1”

Ⅱ、我對 setAttribute() 與 getAttribute() 用法的理解：

1、setAttribute()

setAttribute()：可以給元素添加屬性，也可以修改元素已有的屬性；

2、getAttribute()
getAttribute() ：可以獲得自定義的屬性，也可以獲得標準的屬性；
自定義屬性指：本身 html 標簽沒有這個屬性，而是自己添加的屬性；
標準屬性是指：JS 提供給我們的屬性，而元素打點訪問的是標準的屬性；

Ⅲ、用 getAttribute() 實現選項卡的操作：

1、問題描述：
其一、用JavaScript + html + css 實現，選項卡操作；

其二、分析：
A、用 html + css 實現布局(盒子的布置，空間的分配等)；
B、用 JavaScript 中的 DOM 操作，實現點擊不同選項顯示不同標題欄的功能；

2、實現過程如下：
其一、運行軟件VSCode，親測可實現；
其二、運行代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: '微軟雅黑';
      font-size: 14px;
    }
    #container {
      width: 398px;
      margin: 100px auto;
    }
    #container a {
      display: block;
      width: 98px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      float: left;
      border-top: solid 1px #ff4400;
      border-bottom: solid 1px #ff4400;
      border-left: solid 1px #ff4400;
      color: #333333;
      text-decoration: none;
    }
    #container a:hover {  /* 鼠標放在 a 的標簽上，其文字將顯示為：紅色； */
      color: #ff4400;
    }
    .content {
      width: 355px;
      height: 140px;
      text-align: center;
      border-right: solid 1px #ff4400;
      border-bottom: solid 1px #ff4400;
      border-left: solid 1px #ff4400;
      padding: 30px 0 0 40px;
      display: none;
    }
    .clear {    
      clear: left;
    }
    #container a.on {  /* 對a標簽中的類名為：on 的標簽進行操作； */
      background: #ff4400;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="container"> <!-- 在 div 下的 a 標簽中添加一個自定義屬性， -->
    <a href="#" class="on" index='0' >充話費</a> <!-- 類為：on 的 a 標簽； -->
    <a href="#" index='1' >充流量</a>
    <a href="#" index='2' >充固話</a>
    <a href="#" index='3' style="border-right: 1px solid #ff4400;">充寬帶</a> <!-- style 操作目的：使得顯示的盒子最右邊有邊框； -->

    <div class="clear"></div>

    <div class="content" style="display: block;"> <!-- style 操作目的：使第一個圖片在初始狀態時，能顯示出來； -->
      <img src="images/1.png" width="355px"/> 
      <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) -->
    </div>

    <div class="content">
      <img src="images/2.png" width="355px" />
      <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) -->
    </div>

    <div class="content">
      <img src="images/3.png" width="355px" />
      <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) -->
    </div>

    <div class="content">
      <img src="images/4.png" width="355px" />
      <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) -->
    </div>
  </div>
  <script>
    var as = document.getElementsByTagName('a'); //通過 DOM 操作，拿到標簽為 a 的所有的元素(是個集合)；
    var divs = document.getElementsByClassName('content');//通過 DOM 操作，拿到類為 content 的所有的元素(是個集合)；

    for(var i=0; i<as.length; i++) {

      as[i].onclick = function() { //給 as集合 綁定單擊事件；
        for(var j=0; j<as.length; j++) {
          as[j].className = '';            //將 as集合 的所有元素的類名全部取消； (此時用的思想為：排他思想；)
          divs[j].style.display = 'none';  //將 divs集合 的所有元素全設置成不顯示狀態；
        }

        this.className = 'on';      //僅將被單擊的元素的類名設置為：on，以便執行在 css 中的相關操作；
        
        divs[this.getAttribute('index')].style.display = 'block';
        // 此時是：使用 this.getAttribute('index') 方法來獲得自定義的屬性；
        // 而若代碼使用：divs[this.index].style.display = 'block'; 
        // 會報錯，因為：index 是自定義的屬性而不是標準的屬性，通過 this.index 是拿不到 index 值的；
      }
    }
  </script>
</body>
</html>

其三、結果展示：
A、默認的顯示結果：
在這里插入圖片描述

B、點擊 ‘充流量’ 后的顯示結果：
在這里插入圖片描述

C、點擊 ‘充固話’ 后的顯示結果：
在這里插入圖片描述

D、點擊 ‘充寬帶’ 后的顯示結果：
在這里插入圖片描述

其四、也可以在上面 js 中divs[this.getAttribute('index')].style.display = 'block'; 代碼下添加語句：this.setAttribute('id','www'); ，會發現在as[i].onclick事件觸發后，會在 a標簽中添加 id='www' 的屬性：

A、添加代碼后，在四個按鈕未點擊前，控制臺的頁面顯示為：
在這里插入圖片描述
B、添加代碼后，在四個按鈕點擊后，控制臺的頁面顯示為(添加了id='www')：
在這里插入圖片描述

Ⅳ、選項卡操作的另一種方法：

若對該選項卡操作實例有興趣，還有一種實現方法：
用 JavaScript + HTML + CSS 實現選項卡操作，點擊不同選項就顯示出不同的標題欄(并實現其他要求操作)
地址：https://blog.csdn.net/weixin_43405300/article/details/117903286

Ⅴ、小結：

其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、有興趣的話，可以多多關注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

原文鏈接：https://blog.csdn.net/weixin_43405300/article/details/124490847

欄目分類
最近更新