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

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

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

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

1、Element.setAttribute()：

其一、摘要：

設(shè)置指定元素上的某個(gè)屬性值。如果屬性已經(jīng)存在，則更新該值；否則，使用指定的名稱和值添加一個(gè)新的屬性。
要獲取某個(gè)屬性當(dāng)前的值，可使用 getAttribute()；要?jiǎng)h除某個(gè)屬性，可使用 removeAttribute()。

其二、語法：

element.setAttribute(name, value);

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

如果指定的屬性已經(jīng)存在，則其值變?yōu)閭鬟f的值。如果不存在，則創(chuàng)建指定的屬性。

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

JavaScript

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

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

代碼說明：

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

2、Element.getAttribute()：

其一、摘要：

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

其二、語法：

let attribute = element.getAttribute(attributeName);

· attribute 是一個(gè)包含 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”

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

1、setAttribute()

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

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

Ⅲ、用 getAttribute() 實(shí)現(xiàn)選項(xiàng)卡的操作：

1、問題描述：
其一、用JavaScript + html + css 實(shí)現(xiàn)，選項(xiàng)卡操作；

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

2、實(shí)現(xiàn)過程如下：
其一、運(yùn)行軟件VSCode，親測(cè)可實(shí)現(xiàn)；
其二、運(yùn)行代碼：

<!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 {  /* 鼠標(biāo)放在 a 的標(biāo)簽上，其文字將顯示為：紅色； */
      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 {  /* 對(duì)a標(biāo)簽中的類名為：on 的標(biāo)簽進(jìn)行操作； */
      background: #ff4400;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="container"> <!-- 在 div 下的 a 標(biāo)簽中添加一個(gè)自定義屬性， -->
    <a href="#" class="on" index='0' >充話費(fèi)</a> <!-- 類為：on 的 a 標(biāo)簽； -->
    <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 操作目的：使第一個(gè)圖片在初始狀態(tài)時(shí)，能顯示出來； -->
      <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 操作，拿到標(biāo)簽為 a 的所有的元素(是個(gè)集合)；
    var divs = document.getElementsByClassName('content');//通過 DOM 操作，拿到類為 content 的所有的元素(是個(gè)集合)；

    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集合 的所有元素的類名全部取消； (此時(shí)用的思想為：排他思想；)
          divs[j].style.display = 'none';  //將 divs集合 的所有元素全設(shè)置成不顯示狀態(tài)；
        }

        this.className = 'on';      //僅將被單擊的元素的類名設(shè)置為：on，以便執(zhí)行在 css 中的相關(guān)操作；
        
        divs[this.getAttribute('index')].style.display = 'block';
        // 此時(shí)是：使用 this.getAttribute('index') 方法來獲得自定義的屬性；
        // 而若代碼使用：divs[this.index].style.display = 'block'; 
        // 會(huì)報(bào)錯(cuò)，因?yàn)椋篿ndex 是自定義的屬性而不是標(biāo)準(zhǔn)的屬性，通過 this.index 是拿不到 index 值的；
      }
    }
  </script>
</body>
</html>

其三、結(jié)果展示：
A、默認(rèn)的顯示結(jié)果：
在這里插入圖片描述

B、點(diǎn)擊 ‘充流量’ 后的顯示結(jié)果：
在這里插入圖片描述

C、點(diǎn)擊 ‘充固話’ 后的顯示結(jié)果：
在這里插入圖片描述

D、點(diǎn)擊 ‘充寬帶’ 后的顯示結(jié)果：
在這里插入圖片描述

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

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

Ⅳ、選項(xiàng)卡操作的另一種方法：

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

Ⅴ、小結(jié)：

其一、哪里有不對(duì)或不合適的地方，還請(qǐng)大佬們多多指點(diǎn)和交流！
其二、有興趣的話，可以多多關(guān)注這個(gè)專欄(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

欄目分類
最近更新