docs: 批量博文

2026-05-25 04:17:17 +00:00 · 2020-02-25 17:46:51 +08:00
parent 8e5d2c9e7f
commit 6e99436a9e
373 changed files with 18071 additions and 1116 deletions
--- a/FrontEnd/2.6.md
+++ b/FrontEnd/2.6.md
@@ -0,0 +1,105 @@
+# h5自定义对象
+
+### 一、方式一
+
+在很早以前我们自定义元素的属性要通过 `user-defined-attribute="value"`的方式来设置自己需要的属性
+
+设置自定义属性
+
+```
+<h1 user-defined-attribute="share">杭城小刘</h1>
+```
+
+获取自定义属性
+
+```
+document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute")
+```
+
+## 二、方式二
+
+现在H5为我们提供了一个data属性  **"data-" **作为前缀，可以让所有的HTML元素都支持自定义的属性，只要在标签里面以 **"data-"**
+
+为前缀定义需要的属性即可
+
+设置自定义属性
+
+```
+<h1 data-share="true">杭城小刘</h1>
+```
+
+获取自定义属性（使用H5自定义属性对象Dataset来获取）
+
+```
+var myDiv = document.getElementsByTagName("h1")[0];
+var theValue = myDiv.dataset;    //DOMStringMap对象
+
+document.getElementsByTagName("h1")[0].dataset.share
+document.getElementsByTagName("h1")[0].dataset["share"]
+```
+
+```
+document.getElementsByTagName("h1")[0].getAttribute("data-share")
+```
+
+`DOMStringMap`是HTML5一种新的含有多个名-值对的交互变量
+
+## 三、H5 dataset的操作
+
+删掉一个data属性
+
+```
+delete myDiv.dataset.share
+```
+
+增加一个属性
+
+```
+myDiv.dataset.happy="ok"
+```
+
+## 四、dataset兼容性处理
+
+如果不支持dataset，有必要做一下兼容性处理
+
+```
+<script>
+    if (myDiv.dataset) {
+        myDiv.dataset.sad = "false";
+        var thevalue = myDiv.dataset.sad;
+    } else {
+        myDiv.setAttribute("data-attribute", "sad");
+        var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
+    }
+</script>
+```
+
+
+
+
+
+做一个实验：
+
+```
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>我的标题</title>
+    <meta charset="utf-8" />
+</head>
+
+<body>
+    <h1 data-share="true">杭城小刘</h1>
+</body>
+<script>
+    console.log(document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute"));
+</script>
+
+</html>
+```
+
+然后利用chrome调试，在console命令行分别输入3条指令，结果如下图
+![实验结果](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2017-12-05%20下午10.19.04.png)
+可以看出来，dataset后跟的属性是驼峰命名原则，如果多个单词第二个单词首字母需要大写，检查元素可以看到神奇的变化。
+