自定义属性操作/案例:自定义tab栏切换/HTMl5自定义属性

最新推荐文章于 2024-07-16 17:22:18 发布

原创最新推荐文章于 2024-07-16 17:22:18 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

javascript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了HTML5中自定义属性的使用，包括通过`element.getAttribute`和`element.setAttribute`来操作自定义属性，以及如何利用自定义属性实现Tab栏切换效果。示例代码展示了如何为li元素添加自定义属性`index`，并在点击事件中改变元素的显示状态。同时，文章提及了H5新增的`dataset`属性，用于更方便地获取和设置data-开头的自定义属性。

自定义属性操作

    <div id = 'demo'> </div>
    <script>
      var div = document.querySelector("div");
      //1.获取元素的属性值
      //（1）element.属性
      console.log(div.id);
      //(2)element.getAttribute('属性')
      console.log(div.getAttribute("id"));
    </script>

获取元素的属性值：两种方式：
（1）element.属性主要针对内置属性
（2）element.getAttribute(‘属性’) 主要针对于自定义属性

区别：getAttribute(‘属性’) 这种方式得到的属性可以是程序员自定义的属性
例：

<div id = 'demo' index='1'></div>
<script>
   console.log(div.getAttribute("index"));
</script>

设置属性值的两种方式：
（1）element.属性=‘值’ 主要针对内置属性
（2）element.setAttribute(‘属性’,‘值’) 主要针对于自定义属性

   //2.设置属性值
      //方法一：element.属性='值'
      div.id = "test";
      div.className='navs';
      //element.setAttribute('属性','值')   主要针对于自定义属性
      div.setAttribute("index", 2);
      div.setAttribute('class','footer');//class 特殊，这里面写的就是class 不是className

移除属性
element.removeAttribute(‘属性值’)

     //3.移除属性element.removeAttribute('属性值')
      div.removeAttribute('index');

应用案例:自定义tab栏切换（重点案例）
当鼠标点击上面相应的选项卡（tab) ，下面的内容跟着变化

思路分析：

Tab栏切换有2个大模块
上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想）修改类名的方式
下面的模块内容，会跟着上面的选项卡变化，所以下面模块变化写到点击事件里面
规律：下面的选项卡和上面的模块内容一一对应，相匹配
核心思路：给上面的tab_list 里面的所有li添加自定义属性，属性值从0开始编号
代码：

  <style>
      * {
        padding: 0;
        margin: 0;
      }
      .tab {
        width: 1200px;
        margin: 0px auto;
      }
      li {
        list-style-type: none;
      }
      .tab_list {
        height: 39px;
        line-height: 39px;
        padding: 0 50px;
        text-align: center;
        cursor: pointer;
        background: rgb(245, 240, 240);
        border: 1px solid rgb(160, 151, 151);
      }
      .tab_list li {
        display: inline-block;
        padding: 0 20px;
      }
      .tab_list .current {
        background-color: red;
        color: #fff;
      }
      .tab .tab_con {
        display: block;
      }
      .item {
        display: none;
      }
    </style>
   </head>
   <body>
    <!--当鼠标点击上面相应的选项卡（tab) ，下面的内容跟着变化-->
    <div class="tab">
      <div class="tab_list">
        <ul>
          <li>商品介绍</li>
          <li>规格与包装</li>
          <li>售后保障</li>
          <li>商品评价 (50000)</li>
          <li>手机社区</li>
        </ul>
      </div>
      <div class="tab_con">
        <div class="item" style="display: block">商品介绍模块内容</div>
        <div class="item">规格与保证模块内容</div>
        <div class="item">售后保障模块内容</div>
        <div class="item">商品评价模块内容</div>
        <div class="item">手机社区模块内容</div>
      </div>
    </div>
    <script>
      //获取元素
      var tab_list = document.querySelector(".tab_list");
      var lis = document.querySelectorAll("li");
      var items = document.querySelectorAll(".item");
      //for循环绑定点击事件
      for (var i = 0; i < lis.length; i++) {
        //开始给5个li设定索引号index
        lis[i].setAttribute("index", i);
        lis[i].onclick = function () {
          //模块1.上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想）修改类名的方式
          //先'排他'  其余的li清除class 这个类
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
          }
          //留下自己添加
          this.className = "current";

          //模块2.下面的模块内容，会跟着上面的选项卡变化，所以下面模块变化写到点击事件里面
          var index = this.getAttribute("index");
          //'排他' 让其余的item这些div隐藏
          for (var i = 0; i < items.length; i++) {
            items[i].style.display = "none";
          }
          items[index].style.display = "block";
        };
      }
    </script>
  </body>

H5自定义属性
自定义属性目的：伪类保存并使用数据，有些数据可以保存到页面中二不用保存到数据库中
为了防止有些自定义属性因为无法判断是自定义属性还是内置属性而引起歧义，H5新增了自定义属性

设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值：
比如:
<div data-index = '1'></div>
或者使用JS设定：
element.setAttribute('data-index',2)
H5新增 element.dataset.index或者element.dataset['index']
//如果自定义属性里面又有多个-连接的单词，我们获取的时候采取驼峰命名法
//它只能获取data-开头的属性
(ie 11以上支持）

                //H5新增的获取自定义属性的方法
                 console.log(div.dataset.index);