Главная Обзор Помощь
Вход
lovecoding
/
W250913
10
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

admin

fengchuanyu 1 неделя назад
Родитель
43134b4c22
Сommit
82134ee324
4 измененных файлов с 96 добавлено и 0 удалено
Разделённый вид Показать статистику Diff
  1. 32 0
      4_BOM&DOM/6_DOM_控制样式.html
  2. 30 0
      4_BOM&DOM/7_DOM_事件对象.html
  3. 20 0
      4_BOM&DOM/8_DOM_又击事件.html
  4. 14 0
      4_BOM&DOM/9_DOM_获取整个文档.html

+ 32 - 0
4_BOM&DOM/6_DOM_控制样式.html
Просмотреть файл 

@@ -0,0 +1,32 @@
 
+<!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: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <button>按钮</button>
 
+    <div class="box"></div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box");
 
+        var oBtn = document.getElementsByTagName("button");
 
+
 
+        // style 控制元素的样式 style 后边跟着的是具体的样式名称 
+        // 样式名称如果是复合命名(多个单词构成 background-color) 则需要将中间的-去掉 并将后边的首字母大写(backgroundColor)
 
+        oBtn[0].onclick = function(){
 
+            var num = 200;
 
+            oBox[0].style.width = num + "px";
 
+            oBox[0].style.height = "200px";
 
+            oBox[0].style.backgroundColor = "green";
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 30 - 0
4_BOM&DOM/7_DOM_事件对象.html
Просмотреть файл 

@@ -0,0 +1,30 @@
 
+<!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>
 
+    <a href="https://www.baidu.com">百度</a>
 
+    <script>
 
+        var a = document.getElementsByTagName("a");
 
+        // a[0].onclick = function() {
 
+        //     console.log("你点击了链接");
 
+        //     //在事件处理函数内如果使用 return 阻止默认行为 (比如阻止链接跳转)
 
+        //     return false; 
+        // }
 
+
 
+        a[0].onclick = function(event) {
 
+            console.log("你点击了链接");
 
+            console.log(event);
 
+            // return false;
 
+            // 任何时间处理函数中都有一个 event 对象 称为事件对象
 
+            // 事件对象中有很多自带的属性和方法
 
+            //preventDefault 阻止默认行为
 
+            event.preventDefault(); 
+            console.log(event.clientX, event.clientY);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 20 - 0
4_BOM&DOM/8_DOM_又击事件.html
Просмотреть файл 

@@ -0,0 +1,20 @@
 
+<!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">
 
+        hello world
 
+    </div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box");
 
+        oBox[0].oncontextmenu = function(){
 
+            console.log("你右击了");
 
+            return false; // 阻止默认的右击菜单显示
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 14 - 0
4_BOM&DOM/9_DOM_获取整个文档.html
Просмотреть файл 

@@ -0,0 +1,14 @@
 
+<!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>
 
+    <script>
 
+        var oDocument = document.documentElement;
 
+        console.log(oDocument);
 
+    </script>
 
+</body>
 
+</html>