fengchuanyu 4 months ago
parent
commit
c3e9aa8db4
2 changed files with 57 additions and 0 deletions
  1. 22 0
      5_DOM/4_控制内容.html
  2. 35 0
      5_DOM/练习1_返回顶部.html

+ 22 - 0
5_DOM/4_控制内容.html

@@ -0,0 +1,22 @@
+<!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 class="box">你好世界</div>
+    <div class="btn">按钮</div>
+    <script>
+        var oBox = document.getElementsByClassName("box")[0];
+        var oBtn = document.getElementsByClassName("btn")[0];
+
+        oBtn.onclick = function(){
+            oBox.innerText += "hello world";
+            console.log(oBox.innerText);
+            // oBox.innerHTML = "<h1>hello world</h1>"
+        }
+    </script>
+</body>
+</html>

+ 35 - 0
5_DOM/练习1_返回顶部.html

@@ -0,0 +1,35 @@
+<!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{
+            height: 1000px;
+            width: 500px;
+            border:4px dashed red;
+        }
+        .btn{
+            position: fixed;
+            right: 0;
+            bottom: 0;
+            font-size: 40px;
+            font-weight: bolder;
+        }
+    </style>
+</head>
+<body>
+    <!-- relative  absolute fixed-->
+    <div class="box"></div>
+    <div class="btn"> 返回顶部 </div>
+    <script>
+        var oBtn = document.getElementsByClassName("btn")[0];
+        // oBtn = oBtn[0];
+        console.log(oBtn);
+        oBtn.onclick = function(){
+            window.scrollTo(0,0);
+        }
+    </script>
+</body>
+</html>