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

最新推荐文章于 2021-12-09 17:25:11 发布

鸡蛋花儿

最新推荐文章于 2021-12-09 17:25:11 发布

阅读量1.4k

点赞数

分类专栏：学习类文章标签： data

本文链接：https://blog.csdn.net/weixin_43194235/article/details/85701217

版权

学习类专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

鸡蛋花儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】data-*属性的用法和DOM元素 getAttribute() 方法简单了解

data-* 属性是 HTML5 新增的。data-* 属性用于存储自定义数据的，可以结合getAttribute() 方法调用储存的数据。data-* 属性可以在所有的 HTML 元素中嵌入数据。data-* 属性由以下两部分组成： 1、属性名不要包含大写字母，在 data- 后必须至少有一个字符。 2、该属性可以是任何字符串注意：自定义属性前缀 ...
复制链接

扫一扫