自定义属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54902466/article/details/117885678

本文介绍了HTML中的自定义属性概念及作用，强调了自定义属性需以data-开头的规范，并展示了如何通过JavaScript的dataset属性来操作自定义属性。通过实例演示了如何利用自定义属性实现网页tab切换功能，详细阐述了代码逻辑和实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义属性

概念
作用
规范
为什么要加 data- 开头
语法
注意事项
代码演示:
利用自定义属性完成tab切换

在 HTML 中除了标签的【标准属性】外，开发者还可以给标签【自定义属性】

概念

img的标准属性为src、alt等，但若写一个 data-info 则data-info叫自定义属性

作用

一般用来存储额外数据辅助完成某个功能

规范

自定义属性一律以 data- 开头，后面接名字，且名字中若多个单词用-隔开

例：data-info 、data-label、data-login-name等

为什么要加 data- 开头

方便区分什么是【标准属性】，什么是【自定义属性】
JavaScript操作自定义属性：dataset

语法

元素.dataset.自定义属性名

注意事项

不用加data-，后面遵守驼峰命名法
例：某元素的自定义属性叫 data-label，则元素.dataset.label
通过dataset可以获取自定义属性也可以重新赋值，若赋值的自定义属性不存在时则自动添加

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

<body>
    <div></div>
    <p></p>
    <script>
        // 自定义属性:
        // 应用场景:网页中的tab栏切换

        // 什么是自定义属性
        // 自定义属性:程序元素自己设定的属性
        // 标准属性(内置属性):标签本身就带有的属性

        // 自定义属性的作用
        // 用来保存数据的

        // 自定义属性怎么用?
        // 与变量使用一样
        // 1.定义自定义属性
        // 标签对象.dataset.自定义属性名 = 值
        let div = document.querySelector('div')
        div.dataset.myage = '18'               // data-myage="18"
        let p = document.querySelector('p')
        p.dataset.sayhi = '你好'

        // 获取自定义属性
        // 标签对象.dataset.自定义属性名
        console.log(p.dataset.sayhi);


        // 2.标签对象.setAttribute('data-自定义属性名','值')
        // 获取
        // 标签对象.getAttribute('data-自定义属性名')
    </script>
</body>

</html>

利用自定义属性完成tab切换

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

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

        .title {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }

        .title li {
            float: left;
            width: 33.33%;
            text-align: center;
            line-height: 50px;
        }

        .title a {
            display: block;
            width: 100%;
            height: 100%;
            color: #000;
        }

        a.active {
            background-color: #fff;
            color: orange;
        }

        .content {
            width: 100%;
            height: 350px;
        }

        .content div {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="title">
            <ul>
                <li><a href="javascript:;" class="active" data-name='west'>话费</a></li>
                <li><a href="javascript:;" data-name='east'>机票</a></li>
                <li><a href="javascript:;" data-name='score'>酒店</a></li>
            </ul>
        </div>
        <div class="content">

            <div id="west" style="display: block">
                <h1>充值话费</h1>
            </div>

            <div id="east" style="display: none">
                <h1>订购机票</h1>
            </div>

            <div id="score" style="display: none">
                <h1>预定酒店</h1>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        // 获取元素节点
        let alinks = document.querySelectorAll('.title a')
        let block = document.querySelectorAll('.content div')
        // 循环获得每一个li
        for (let i = 0; i < alinks.length; i++) {
            //添加点击事件
            alinks[i].addEventListener('click', function () {
                //排他思想-去样式
                for (let index = 0; index < alinks.length; index++) {
                    alinks[index].className = ''
                }
                //自己添加样式
                alinks[i].className = 'active'
                //排他思想-隐藏
                for (let j = 0; j < block.length; j++) {
                    block[j].style.display = 'none'
                }
                // 通过li的自定义属性名=对应div标签名
                let myId = alinks[i].dataset.name
                // 通过标签名-自己显示- 一一对应
                document.getElementById(myId).style.display = 'block'
            })
        }
    </script>

</body>

</html>