setAttribute() 与 getAttribute() 用法剖析及选项卡操作的实例展示，这一篇就够了

最新推荐文章于 2024-07-30 10:40:20 发布

狮子座的男孩

最新推荐文章于 2024-07-30 10:40:20 发布

阅读量9.4k

点赞数 13

分类专栏： # 前端实战与例子文章标签： javascript setAttribute getAttribute 选项卡操作经验分享

本文链接：https://blog.csdn.net/weixin_43405300/article/details/124490847

版权

前端实战与例子专栏收录该内容

53 篇文章 10 订阅

订阅专栏

Ⅰ、在 MDN 上 setAttribute() 与 getAttribute() 函数的用法解释(`很详细`)：

1、Element.setAttribute()：

其一、摘要：

设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
要获取某个属性当前的值，可使用 getAttribute()；要删除某个属性，可使用 removeAttribute()。

其二、语法：

element.setAttribute(name, value);

参数：
name 表示属性名称的字符串；
value 表示属性的值/新值；

如果指定的属性已经存在，则其值变为传递的值。如果不存在，则创建指定的属性。

其三、在下面的例子中，setAttribute() 被用于设置 <button> 上的属性;

HTML

<button>Hello World</button>

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