您的位置：首页 > 其它

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

2019-01-03 16:05 381 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航