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

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

杨蛋蛋~R

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

阅读量261

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108903800

版权

javascript 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

这篇博客探讨了自定义属性的操作，包括获取和设置属性值的方法，并通过一个重点案例讲解了自定义tab栏切换的实现。作者强调了在tab切换中使用自定义属性进行数据绑定的重要性，并介绍了H5中为避免歧义而引入的数据属性（data-）。同时，展示了如何设置和获取这些属性，以及在不同浏览器中的兼容性情况。

摘要由CSDN通过智能技术生成

自定义属性操作

    <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('calss','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);

杨蛋蛋~R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

自定义属性操作

应用案例:自定义tab栏切换 （重点案例）

H5自定义属性

应用案例:自定义tab栏切换（重点案例）