HTML--自定义属性--使用/教程/实例-CFANZ编程社区

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

简介

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

方法主要有两种：

用传统的JavaScript的读写属性的方法
使用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>

结果

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

方案2：H5

简介

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

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

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

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

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

官网

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>

结果

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

0 条评论