| 12345678910111213141516171819202122232425262728293031323334353637383940 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="box" data-name="哈哈" data-aa-bb="ab" style="color:red">这是一个盒子</div>
- <p data-aa="哦哦">一个段落</p>
- <!--
- 给元素自定义属性：
- 在标签中 添加data-xxx='xxx';
- -->
- <script>
- /***
- * 给元素自定义属性：
- * 设置：
- * dom.属性名 = '属性值'
- * dom.dataset.属性名 = '属性值'
- * dom .setAttribute('属性名','属性值')
- * 读取：
- * dom.dataset.属性名
- * dom.getAttribute('属性名')
- * dom.属性名
- */
- var box = document.getElementById("box");
- var p = document.querySelector("p");
- p.oo = '哒哒哒';
- box.dataset.c = 'OMyGod';
- box.setAttribute("title",'Hello');
- console.log(box.getAttribute("title"));
- console.log(box.dataset.name);
- console.log(box.dataset.aaBb);
- console.log(box.dataset.c);
- console.log(p.dataset.aa);
- console.log(p.oo);
- </script>
- </body>
- </html>
|
