自定义属性操作案例

发表于 |

为了练习一下自定义属性操作，做了一个tab栏切换的demo

自定义属性操作

  • getAttribute() 获取标签行内属性
  • setAttribute() 设置标签行内属性
  • removeAttribute() 移除标签行内属性
  • 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

tab栏切换案例

别人写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }

    .hd {
      height: 45px;
    }

    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }

    .hd span.current {
      background-color: purple;
    }

    .bd li {
      height: 255px;
      background-color: purple;
      display: none;
    }

    .bd li.current {
      display: block;
    }
  </style>

</head>
<body>
<div class="box" id="box">
  <div class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </div>
  <div class="bd">
    <ul>
      <li class="current">我是体育模块</li>
      <li>我是娱乐模块</li>
      <li>我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </div>
</div>
<script src="common.js"></script>
<script>

  //获取最外面的div
  var box=my$("box");
  //获取的是里面的第一个div
  var hd=box.getElementsByTagName("div")[0];
  //获取的是里面的第二个div
  var bd=box.getElementsByTagName("div")[1];
  //获取所有的li标签
  var list=bd.getElementsByTagName("li");
  //获取所有的span标签
  var spans=hd.getElementsByTagName("span");
  //循环遍历的方式,添加点击事件
  for(var i=0;i<spans.length;i++){
    //在点击之前就把索引保存在span标签中
    spans[i].setAttribute("index",i);
    spans[i].onclick=function () {
      //第一件事,所有的span的类样式全部移除
      for(var j=0;j<spans.length;j++){
        spans[j].removeAttribute("class");
      }

      //第二件事,当前被点击的span应用类样式
      this.className="current";
      //span被点击的时候获取存储的索引值
      //alert(this.getAttribute("index"));
      var num=this.getAttribute("index");

      //获取所有的li标签,每个li标签先全部隐藏
      for(var k=0;k<list.length;k++){
        list[k].removeAttribute("class");
      }
      //当前被点击的span对应的li标签显示
      list[num].className="current";
    };
  }

</script>


</body>
</html>


效果图：


我写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试草稿</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        height: 250px;
        width: 200px;
        margin:100px auto;
    }
    .hd {
        height: 50px;
        width: 200px;
        background-color: red;
    }
    .hd ul {
        display: flex;
        height: 100%;
        widows: 100%;
        justify-content:center;
        align-items: center;
    }
    .hd li {
        flex: 1;
        text-align: center;
        list-style: none;
    }
    .hd li.current {
        background-color: yellow;
    }
    .bd {
        width: 200px;
        height: 200px;
        background-color:pink;
    }
    .bd li {
        list-style: none;
        display: none;
    }
    .bd li.current {
        display: block;
    }

</style>
<body>
    <div class="box" id="box">
        <div class="hd" >
            <ul>
                <li class="current">魏</li>
                <li>蜀</li>
                <li>吴</li>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <li class="current">曹操</li>
                <li>刘备</li>
                <li>孙权</li>
            </ul>
        </div>
    </div>


    <script>
        function my$(id){
            return document.getElementById(id);
        }
        var box = my$("box");
        var hd = box.getElementsByTagName("div")[0];
        var bd = box.getElementsByTagName("div")[1];

        var hdlist = hd.getElementsByTagName("li");
        var bdlist = bd.getElementsByTagName("li");

        for(var i=0; i<hdlist.length; i++){
            hdlist[i].num = i;//点语法添加属性
            hdlist[i].onclick = function(){
                for(var j=0;j<hdlist.length;j++){
                    hdlist[j].removeAttribute("class");
                }
                this.setAttribute("class","current");
                
                for(var k=0;k<bdlist.length;k++){
                    bdlist[k].removeAttribute("class");
                }
                bdlist[this.num].setAttribute("class","current");
            }

        }

    </script>



</body>

</html>


效果图：