【学习笔记】data-*属性的用法和DOM元素 getAttribute() 方法简单了解

程序员文章站 2022-04-25 19:33:53

...

data-* 属性是 HTML5 新增的。

data-* 属性用于存储自定义数据的，
可以结合getAttribute() 方法调用储存的数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

data-* 属性由以下两部分组成：

    1、属性名不要包含大写字母，在 data- 后必须至少有一个字符。
    2、该属性可以是任何字符串
    

    注意： 自定义属性前缀 "data-" 会被客户端忽略。

getAttribute() 方法是通过名称获取属性的值。

下面例子：
01 的data-number-type=“number1”（自定义属性名为data-number-type，number1则是要储存的属性值内容）
单击01，会弹出“The 01 type is number1.”
number1是data-*中储存的数据，通过getAttribute() 方法将其调用显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function dj(number){
            var numberType = number.getAttribute("data-number-type");
            //  getAttribute是用来获取目标属性的值
            alert("The "+number.innerHTML+" type is "+numberType+".");
        }
    </script>
</head>
<body>
    <p>data-*是自定义名字的</p>
    <p onclick="dj(this)"  data-number-type="number1">01</p>
    <p onclick="dj(this)" data-number-type="number2">02</p>
    <p onclick="dj(this)"  data-number-type="number3">03</p>
</body>
</html>