首頁 探索 說明
登入
lovecoding
/
Web1020
10
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

admin

fengchuanyu 5 月之前
父節點
8e13af626e
當前提交
b4cd34c8af
共有 3 個文件被更改，包括 39 次插入 和 1 次删除
統一視圖 顯示文件統計
  1. 3 0
      5_DOM/5_DOM事件.html
  2. 11 1
      5_DOM/6_事件对象.html
  3. 25 0
      5_DOM/7_控制页面样式.html

+ 3 - 0
5_DOM/5_DOM事件.html
查看文件 

@@ -17,11 +17,14 @@
 
     <button>按钮</button>
 
     <button>按钮</button>
 
     <script>
 
     <script>
 
         var oBtn = document.getElementsByTagName("button")[0];
 
         var oBtn = document.getElementsByTagName("button")[0];
 
+        // 鼠标左键
 
         oBtn.onclick = function(){
 
         oBtn.onclick = function(){
 
             console.log("hello world");
 
             console.log("hello world");
 
         }
 
         }
 
+        // 鼠标右键
 
         oBtn.oncontextmenu = function(){
 
         oBtn.oncontextmenu = function(){
 
             console.log("右键");
 
             console.log("右键");
 
+            // 阻止默认事件 只能写在事件函数里面
 
             return false;
 
             return false;
 
         }
 
         }
 
     </script>
 
     </script>

+ 11 - 1
5_DOM/6_事件对象.html
查看文件 

@@ -10,7 +10,17 @@
 
     <script>
 
     <script>
 
         var oBtn = document.getElementsByTagName("button")[0];
 
         var oBtn = document.getElementsByTagName("button")[0];
 
         oBtn.onclick = function(e){
 
         oBtn.onclick = function(e){
 
-            console.log(e);
 
+            //clientX 鼠标相对于可视区域的x坐标
 
+            console.log(e.clientX);
 
+            //clientY 鼠标相对于可视区域的y坐标
 
+            console.log(e.clientY);
 
+        }
 
+        // 获取页面的可视区域 可以理解为整个html文档
 
+        var oDom = document.documentElement;
 
+        console.log(oDom);
 
+        oDom.onclick = function(e){
 
+            console.log("点击了页面");
 
+            console.log(e.clientX);
 
         }
 
         }
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 25 - 0
5_DOM/7_控制页面样式.html
查看文件 

@@ -0,0 +1,25 @@
 
+<!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>
 
+    <!-- 在html标签上 style属性内写的样式 称之为內联样式 -->
 
+    <div style="font-size: 50px;font-weight: bolder;" class="box">hello world</div>
 
+    <button id="btn">按钮</button>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        var oBtn = document.getElementById("btn");
 
+
 
+        oBtn.onclick = function(){
 
+            oBox.style.color = "red";
 
+            // js控制样式的时候如果出现中横线连接符 换成驼峰命名
 
+            var testNum = 100;
 
+            oBox.style.marginLeft = testNum + "px";
 
+        }
 
+
 
+    </script>
 
+</body>
 
+</html>