1.自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5初级阶段</title>
<style type="text/css">
.box {
/*Add your CSS*/
}
</style>
</head>
<body>
<!--
自定义属性:给程序使用的数据,存储在自定义属性中
语法规则:
1.必须以 data-
2.多个英文单词使用 - 分割
-->
<div id="box" data-demo-test="hello world">Hello</div>
<script type="text/javascript">
// Add your code
var boxDom = document.querySelector("#box");
//var val = boxDom.getAttribute("demo");
// HTML5中使用 DOM 的 dataset 操作自定义属性
//读取自定义属性值
//var val = boxDom.dataset.demoTest;
//console.log(val);
// 修改自定义属性值
//boxDom.dataset.demoTest = "12345";
// 描述一个人
var jsonObj = {
"name": "jance",
"age": 29
}
// JSON 对象 转 字符串
var jsonStr= JSON.stringify(jsonObj);
// 存储一个JSON对象
boxDom.dataset.demoTest = jsonStr;
// 获取信息
var str = boxDom.dataset.demoTest;
// JSON格式的字符串转换成 JSON对象
var json = JSON.parse(str);
console.log(json.name);
// HTML5自定属性只能存储字符串或者数字,如果存储JSON,需要进行相应的转换
</script>
</body>
</html>