HTML--自定义属性--使用/教程/实例

迷南。 2023-10-01 10:11 6阅读 0赞

原文网址：[HTML--自定义属性--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][HTML--_--_IT_-CSDN]

## 简介 ##

本文用示例介绍HTML自定义属性的方法。

方法主要有两种：

1.  用传统的JavaScript的读写属性的方法
2.  使用H5新特性（data-\*）

## 方案1：传统方法 ##

JavaScript有如下方法操作属性：

element.getAttribute('属性');	//读属性值
    element.setAttribute('属性');	//写属性值
    element.removeAttribute('属性');	//删除属性

示例

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div id="test" abc-def="hello">
        这是个Demo
    </div>
    
    <script>
        let test = document.getElementById('test');
    
        console.log(test.getAttribute('abc-def'));
    
        test.setAttribute('abc-def', 'world');
        console.log(test.getAttribute('abc-def'));
    
        test.removeAttribute('abc-def');
        console.log(test.getAttribute('abc-def'));
    </script>
    </body>
    </html>

结果

![b2a74f86969a4aed942f95785e42c247.png][]

## 方案2：H5 ##

**简介**

HTML5增加了一个新特性：可以在HTML标签上定义以 "data-"开头的属性。

使用data-\*自定义属性可以解决自定义属性混乱无管理的现状。

自定义属性名称的名称的限制：

1.  该名称不能包含大写字母。
2.  该名称不能以xml开头，无论这些字母是大写还是小写；
3.  该名称不能包含任何分号 (U+003A)；

自定义数据属性 data-test-value 可以通过 HTMLElement.dataset.testValue ( 或者是 HTMLElement.dataset\["testValue"\] ) 来访问，任何破折号都会被下个字母的大写替代(**驼峰拼写**)，例如：data-abc-def，就需要通过element.dataSet.abcDef来访问。

**官网**

[data-\* - HTML（超文本标记语言） | MDN][data-_ - HTML_ _ MDN]

**示例**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div id="test" data-abc-def="hello">
        这是个Demo
    </div>
    
    <script>
        let test = document.getElementById('test');
    
        console.log(test.dataset.abcDef);
        // 这样也可以：console.log(test.getAttribute('data-abc-def'));
    
        test.dataset.abcDef = 'world';
        // 这样也可以：test.setAttribute('data-abc-def', 'world');
        console.log(test.dataset.abcDef);
    </script>
    </body>
    </html>

结果

![b2d3c90cdbd1427391e4412084e95b79.png][]

[HTML--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122021311
[b2a74f86969a4aed942f95785e42c247.png]: https://img-blog.csdnimg.cn/b2a74f86969a4aed942f95785e42c247.png
[data-_ - HTML_ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/data-*
[b2d3c90cdbd1427391e4412084e95b79.png]: https://img-blog.csdnimg.cn/b2d3c90cdbd1427391e4412084e95b79.png