首页 发现 帮助
登录
lovecoding
/
W250511
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

admin

fengchuanyu 2 月之前
父节点
b7dc1fff9a
当前提交
5215acd6ad
共有 2 个文件被更改，包括 114 次插入 和 0 次删除
合并视图 显示文件统计
  1. 72 0
      4-BOM&DOM/11_DOM控制类.html
  2. 42 0
      4-BOM&DOM/12_DOM多元素控制.html

+ 72 - 0
4-BOM&DOM/11_DOM控制类.html
查看文件 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* #box{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            color: #fff;
 
+            font-size: 20px;
 
+            text-align: center;
 
+            line-height: 200px;
 
+        } */
 
+
 
+        .active{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            color: #fff;
 
+            font-size: 20px;
 
+            text-align: center;
 
+            line-height: 200px;
 
+        }
 
+        .div1{
 
+            font-weight: bold;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box" class="div1">
 
+        hello world
 
+    </div>
 
+    <button id="add-btn">添加类名</button>
 
+    <button id="remove-btn">删除类名</button>
 
+    <script>
 
+        var oBox = document.getElementById("box");
 
+        var addBtn = document.getElementById("add-btn");
 
+        var removeBtn = document.getElementById("remove-btn");
 
+        // 通过js控制类名
 
+
 
+        addBtn.onclick = function(){
 
+            // className 可以控制标签的class 的值 只能实现覆盖效果
 
+            // 设置标签的类名 通过className 赋值是一个覆盖 覆盖原有class 里面的值
 
+            // oBox.className = "active";
 
+            // 获取标签的类名
 
+            // console.log(oBox.className);
 
+
 
+            // 在原有类名基础上新增类名
 
+            // 利用字符串拼接实现
 
+            // oBox.className = oBox.className + " active";
 
+            // 利用classList 实现 新增类名 在class 最后新增一个类名
 
+            oBox.classList.add("active");
 
+
 
+        }
 
+
 
+        removeBtn.onclick = function(){
 
+            // 利用classList 实现 删除类名
 
+            oBox.classList.remove("active");
 
+        }
 
+
 
+        // oBox.style.color = "red";
 
+        // oBox.styel.width = "200px";
 
+        // .
 
+        // .
 
+        // .
 
+        // .
 
+    </script>
 
+</body>
 
+</html>

+ 42 - 0
4-BOM&DOM/12_DOM多元素控制.html
查看文件 

@@ -0,0 +1,42 @@
 
+<!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>
 
+    <ul>
 
+        <li>菜单项一</li>
 
+        <li>菜单项二</li>
 
+        <li>菜单项三</li>
 
+        <li>菜单项四</li>
 
+        <li>菜单项五</li>
 
+    </ul>
 
+    <script>
 
+        var aLi = document.getElementsByTagName("li");
 
+        console.log(aLi);
 
+        // var aLi1 = aLi[0];
 
+        // var aLi2 = aLi[1];
 
+        // var aLi3 = aLi[2];
 
+        // var aLi4 = aLi[3];
 
+        // var aLi5 = aLi[4];
 
+
 
+        // aLi1.onclick = function(){
 
+
 
+        // }
 
+
 
+        for(var i = 0;i<aLi.length;i++){
 
+            // console.log(i);
 
+            // 在循环过程中给每一个标签赋一个新的属性index 并赋值为i
 
+            aLi[i].index = i;
 
+            aLi[i].onclick = function(){
 
+                // console.log(i);
 
+                // 获取赋值的index
 
+                console.log(this.index)
 
+            }
 
+        }
 
+
 
+    </script>
 
+</body>
 
+</html>