WebApi入门第五章（attribute语法学习）

海海呐

已于 2022-06-29 09:37:19 修改

阅读量542

点赞数 2

分类专栏： WebAPI 文章标签：学习 html css

于 2021-08-17 21:01:43 首次发布

本文链接：https://blog.csdn.net/m0_56344602/article/details/119765612

版权

WebAPI 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

本文详细介绍了如何使用JavaScript操作DOM属性和事件处理来实现Tab切换效果。通过分析元素的行内标准属性、自定义属性及动态添加属性的获取和设置方法，展示了在JavaScript中如何正确地读取和修改这些属性。此外，通过一个具体的Tab切换小案例，解释了事件源的选择、事件类型以及事件处理的逻辑，包括元素的显示隐藏控制。这个案例中，点击不同的Tab标签会改变其背景色，并显示相应的内容区域。

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

标签元素属性:
- （1）行内标准属性：input.id（针对行内）
- （2）行内自定义属性：开发追加的，html自己不能使用
- （3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性
- （4）行外属性
1.attribute方式
- 1.获取属性：元素.getAttribute ( "id" ) ==== 行内属性（元素.id）
  - 如果是类型直接使用class，无需使用className，因为这种方式用的是字符串语法获取属性
- 2.设置属性：元素.setAttribute('属性名',属性值); ==== 元素.id = 值
- 3.删除属性：元素.removeAttribute('属性名'); ==== delete 元素.id
- 用attribute方式设置的属性只能使用attribute方式来获取
2.注意点
- js点语法能获取到的属性：
  - （1）行内标准属性
  - （2）js点语法动态添加的自定义属性
- 不能获取到的属性：
  - （1）行内自定义属性
  - (2)行外属性
- getAttribute能获取到的属性：
  - （1）行内标准属性
  - （2）行内自定义属性
  - （3）setAttribute动态添加的属性
- 不能获取到的属性：
  - （1）js点语法动态添加的自定义属性
  - （2）行外属性
3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)
- 标准属性操作：使用js点语法（代码简洁）
- 自定义属性操作：用attribute（易读性更高）

tab栏切换小案例

需求

鼠标点击tab栏页签，tab效果切换（被选中的紫色显示），同时对应的内容栏切换

效果图

思路分析


            1. span与li有一个索引对应关系：第一个span对应第一个li
            2. span有没有颜色：current类控制（排他）
            3. li的显示也是通过：current类控制（排他）

            1. 事件源：所有的span  querySelectorAll('#box>.hd>span')  遍历才能用：forEach()
            2. 事件类型：点击切换 || 鼠标移入
            3. 事件处理
            3.1 排他：span：两步走
            3.2 排他：li：两步走

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        ul {
            list-style: none;
        }


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


        .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>关羽</span>
            <span class="current">干将莫邪</span>
            <span>李白</span>
            <span>成吉思汗</span>
        </div>
        <div class="bd">
            <ul id="list">
                <li>我是上单</li>
                <li class="current">我是中单</li>
                <li id="li3">我是打野</li>
                <li>我是射手</li>
            </ul>
        </div>
        <script>
            // 分析 当鼠标点击span的时候current就移到点击事件的span上面
            let spans = document.querySelectorAll('span');
            // console.log(spans);
            let lis = document.querySelectorAll('li');
            // console.log(lis);
            spans.forEach(function (span, i) {
                // 点击事件  span.onclick = function ();
                span.onclick = function () {
                    // console.log(span);
                    // spans首先得遍历
                    spans.forEach(function (span) {
                        // 排他思想 得删除掉所有的current 需要用到删除的元素.classList.remove（'需要删除的类名'）
                        span.classList.remove('current');
                    });
                    // 遍历完在给需要添加的元素添加属性
                    span.classList.add('current');
                    // 点击完之后下面的li也要跟着变化 需要用到下标i
                    // 1先遍历lis
                    lis.forEach(function (li) {
                        // console.log(li); 不能要全部li只要其中一个li 鼠标点击到哪个li就跳转哪个li
                        // 1也是使用排他思想 先把所有li删除 
                        li.classList.remove('current');
                    });
                    // 2在用下标求出点击的li[i]
                    lis[i].classList.add('current')


                }

            })

        </script>
</body>

</html>

上一章：WebApi入门第四章（多选框小练习）

下一章：WebApi入门第六章（ DOM节点）

海海呐

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
WebApi入门第五章（attribute语法学习）

标签元素属性: （1）行内标准属性：input.id（针对行内）（2）行内自定义属性：开发追加的，html自己不能使用（3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性（4）行外属性 1.attribute方式 1.获取属性：元素.getAttribute ( "id" ) ==== 行内属性（元素.id）如果是类型直接使用class，无需使用className，因为这种方式用的是..
复制链接

扫一扫