JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】

曾经终败给现在 2023-01-09 15:43 141阅读 0赞

> **学习地址：**
> 
> 1.  [谷粒学院——尚硅谷][Link 1]
> 2.  [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)][JavaScript_140_JS]
> 
> --------------------
> 
> [JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】][JavaScript_JavaScript_140_JS]

***目   录***

P104 104.尚硅谷\_JS基础\_添加删除记录-添加 23:00

P105 105.尚硅谷\_JS基础\_添加删除记录-修改 07:58

P106 106.尚硅谷\_JS基础\_a的索引问题 06:49

P107 107.尚硅谷\_JS基础\_操作内联样式 16:42

CSS 背景属性（Background）

通过JS修改元素的样式【语法：元素.style.样式名 = 样式值】

读取标签的样式【语法：元素.style.样式名;】

P108 108.尚硅谷\_JS基础\_获取元素的样式 24:56

background-color 属性

获取元素的当前显示的样式【语法：元素.currentStyle.样式名】IE浏览器

getComputedStyle()：获取元素当前的样式

P109 109.尚硅谷\_JS基础\_getStyle()方法 10:05

同时兼容IE8与其它浏览器

实验代码

P110 110.尚硅谷\_JS基础\_其他样式相关的属性 48:04

DOM Element 对象

① element.clientWidth、element.clientHeight

② offsetWidth、offsetHeight

③ offsetParent：获取当前元素的定位父元素

④ offsetLeft、offsetTop

⑤ scrollWidth、scrollHeight

⑥ scrollLeft、scrollTop

①~⑥ 练习代码

滚动条练习【用户将滚动条滚到底，可进行注册】

checkbox 对象：disabled属性

用户阅读协议，且滚动条滚到底，才可以进行注册——代码and运行截图

P111 111.尚硅谷\_JS基础\_事件对象 18:02

移动鼠标，以px显示距离

P112 112.尚硅谷\_JS基础\_div跟随鼠标移动 23:33

P113 113.尚硅谷\_JS基础\_事件的冒泡 15:52

事件的冒泡（Bubble）

事件冒泡-案例1

事件冒泡-案例2

--------------------

# P104 104.尚硅谷\_JS基础\_添加删除记录-添加 23:00 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>添加删除记录练习</title>
    		
    		<style type="text/css">
    			@CHARSET "UTF-8";
    			#total {
    				width: 450px;
    				margin-left: auto;
    				margin-right: auto;
    			}
    			ul {
    				list-style-type: none;
    			}
    			li {
    				border-style: solid;
    				border-width: 1px;
    				padding: 5px;
    				margin: 5px;
    				background-color: #99ff99;
    				float: left;
    			}
    			.inner {
    				width: 400px;
    				border-style: solid;
    				border-width: 1px;
    				margin: 10px;
    				padding: 10px;
    				float: left;
    			}
    			#employeeTable {
    				border-spacing: 1px;
    				background-color: black;
    				margin: 80px auto 10px auto;
    			}
    			th, td {
    				background-color: white;
    			}
    			#formDiv {
    				width: 250px;
    				border-style: solid;
    				border-width: 1px;
    				margin: 50px auto 10px auto;
    				padding: 10px;
    			}
    			#formDiv input {
    				width: 100%;
    			}
    			.word {
    				width: 40px;
    			}
    			.inp {
    				width: 200px;
    			}
    		</style>
    		<script type="text/javascript">
    			/*
    			 * 删除tr的响应函数
    			 */
    			function delA() {
    				//点击超链接以后需要删除超链接所在的那行
    				//这里我们点击那个超链接this就是谁
    				//获取当前tr
    				var tr = this.parentNode.parentNode;
    				//获取要删除的员工的名字
    				//var name = tr.getElementsByTagName("td")[0].innerHTML;
    				var name = tr.children[0].innerHTML;
    				//删除之前弹出一个提示框
    				/*
    				 * confirm()用于弹出一个带有确认和取消按钮的提示框
    				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    				 * 如果用户点击确认则会返回true，如果点击取消则返回false
    				 */
    				var flag = confirm("确认删除" + name + "吗?");
    				//如果用户点击确认
    				if (flag) {
    					//删除tr
    					tr.parentNode.removeChild(tr);
    				}
    				/*
    				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
    				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
    				 */
    				return false;
    			};
    
    			window.onload = function() {
    				/*
    				 * 点击超链接以后，删除一个员工的信息
    				 */
    				//获取所有额超链接
    				var allA = document.getElementsByTagName("a");
    				//为每个超链接都绑定一个单击响应函数
    				for (var i = 0; i < allA.length; i++) {
    					allA[i].onclick = delA;
    				}
    
    				/*
    				 * 添加员工的功能
    				 * 	- 点击按钮以后，将员工的信息添加到表格中
    				 */
    				//为提交按钮绑定一个单击响应函数
    				var addEmpButton = document.getElementById("addEmpButton");
    				addEmpButton.onclick = function() {
    					//获取用户添加的员工信息
    					//获取员工的名字
    					var name = document.getElementById("empName").value;
    					//获取员工的email和salary
    					var email = document.getElementById("email").value;
    					var salary = document.getElementById("salary").value;
    					//alert(name+","+email+","+salary);
    
    					/*
    					 *  <tr>
    							<td>Tom</td>
    							<td>tom@tom.com</td>
    							<td>5000</td>
    							<td><a href="javascript:;">Delete</a></td>
    						</tr>
    						需要将获取到的信息保存到tr中
    					 */
    
    					//创建一个tr
    					var tr = document.createElement("tr");
    
    					//创建四个td
    					var nameTd = document.createElement("td");
    					var emailTd = document.createElement("td");
    					var salaryTd = document.createElement("td");
    					var aTd = document.createElement("td");
    					//创建一个a元素
    					var a = document.createElement("a");
    
    					//创建文本节点
    					var nameText = document.createTextNode(name);
    					var emailText = document.createTextNode(email);
    					var salaryText = document.createTextNode(salary);
    					var delText = document.createTextNode("Delete");
    
    					//将文本添加到td中
    					nameTd.appendChild(nameText);
    					emailTd.appendChild(emailText);
    					salaryTd.appendChild(salaryText);
    					a.appendChild(delText); // 向a中添加文本
    
    					//将a添加到td中
    					aTd.appendChild(a);
    
    					//将td添加到tr中
    					tr.appendChild(nameTd);
    					tr.appendChild(emailTd);
    					tr.appendChild(salaryTd);
    					tr.appendChild(aTd);
    
    					//向a中添加href属性
    					a.href = "javascript:;";
    
    					//为新添加的a再绑定一次单击响应函数
    					a.onclick = delA;
    
    					//获取table
    					var employeeTable = document.getElementById("employeeTable");
    					//获取employeeTable中的tbody
    					var tbody = employeeTable.getElementsByTagName("tbody")[0];
    					//将tr添加到tbodye中
    					tbody.appendChild(tr);
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<table id="employeeTable">
    			<tr>
    				<th>Name</th>
    				<th>Email</th>
    				<th>Salary</th>
    				<th> </th>
    			</tr>
    			<tr>
    				<td>Tom</td>
    				<td>tom@tom.com</td>
    				<td>5000</td>
    				<td>
    					<a href="javascript:;">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Jerry</td>
    				<td>jerry@sohu.com</td>
    				<td>8000</td>
    				<td>
    					<a href="deleteEmp?id=002">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Bob</td>
    				<td>bob@tom.com</td>
    				<td>10000</td>
    				<td>
    					<a href="deleteEmp?id=003">Delete</a>
    				</td>
    			</tr>
    		</table>
    		<div id="formDiv">
    			<h4>添加新员工</h4>
    			<table>
    				<tr>
    					<td class="word">name: </td>
    					<td class="inp">
    						<input type="text" name="empName" id="empName" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">email: </td>
    					<td class="inp">
    						<input type="text" name="email" id="email" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">salary: </td>
    					<td class="inp">
    						<input type="text" name="salary" id="salary" />
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<button id="addEmpButton">
    							Submit
    						</button>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>

# P105 105.尚硅谷\_JS基础\_添加删除记录-修改 07:58 #

> ![2021012207000978.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>添加删除记录练习</title>
    		
    		<style type="text/css">
    			@CHARSET "UTF-8";
    			#total {
    				width: 450px;
    				margin-left: auto;
    				margin-right: auto;
    			}
    			ul {
    				list-style-type: none;
    			}
    			li {
    				border-style: solid;
    				border-width: 1px;
    				padding: 5px;
    				margin: 5px;
    				background-color: #99ff99;
    				float: left;
    			}
    			.inner {
    				width: 400px;
    				border-style: solid;
    				border-width: 1px;
    				margin: 10px;
    				padding: 10px;
    				float: left;
    			}
    			#employeeTable {
    				border-spacing: 1px;
    				background-color: black;
    				margin: 80px auto 10px auto;
    			}
    			th, td {
    				background-color: white;
    			}
    			#formDiv {
    				width: 250px;
    				border-style: solid;
    				border-width: 1px;
    				margin: 50px auto 10px auto;
    				padding: 10px;
    			}
    			#formDiv input {
    				width: 100%;
    			}
    			.word {
    				width: 40px;
    			}
    			.inp {
    				width: 200px;
    			}
    		</style>
    		<script type="text/javascript">
    			/*
    			 * 删除tr的响应函数
    			 */
    			function delA() {
    				//点击超链接以后需要删除超链接所在的那行
    				//这里我们点击那个超链接this就是谁
    				//获取当前tr
    				var tr = this.parentNode.parentNode;
    				//获取要删除的员工的名字
    				//var name = tr.getElementsByTagName("td")[0].innerHTML;
    				var name = tr.children[0].innerHTML;
    				//删除之前弹出一个提示框
    				/*
    				 * confirm()用于弹出一个带有确认和取消按钮的提示框
    				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    				 * 如果用户点击确认则会返回true，如果点击取消则返回false
    				 */
    				var flag = confirm("确认删除" + name + "吗?");
    				//如果用户点击确认
    				if (flag) {
    					//删除tr
    					tr.parentNode.removeChild(tr);
    				}
    				/*
    				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
    				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
    				 */
    				return false;
    			};
    
    			window.onload = function() {
    				/*
    				 * 点击超链接以后，删除一个员工的信息
    				 */
    				//获取所有额超链接
    				var allA = document.getElementsByTagName("a");
    				//为每个超链接都绑定一个单击响应函数
    				for (var i = 0; i < allA.length; i++) {
    					allA[i].onclick = delA;
    				}
    				/*
    				 * 添加员工的功能
    				 * 	- 点击按钮以后，将员工的信息添加到表格中
    				 */
    				//为提交按钮绑定一个单击响应函数
    				var addEmpButton = document.getElementById("addEmpButton");
    				addEmpButton.onclick = function() {
    					//获取用户添加的员工信息
    					//获取员工的名字
    					var name = document.getElementById("empName").value;
    					//获取员工的email和salary
    					var email = document.getElementById("email").value;
    					var salary = document.getElementById("salary").value;
    					//alert(name+","+email+","+salary);
    
    					/*
    					 *  <tr>
    							<td>Tom</td>
    							<td>tom@tom.com</td>
    							<td>5000</td>
    							<td><a href="javascript:;">Delete</a></td>
    						</tr>
    						需要将获取到的信息保存到tr中
    					 */
    
    					//创建一个tr
    					var tr = document.createElement("tr");
    
    					//设置tr中的内容
    					tr.innerHTML = "<td>" + name + "</td>" +
    						"<td>" + email + "</td>" +
    						"<td>" + salary + "</td>" +
    						"<td><a href='javascript:;'>Delete</a></td>";
    
    					//获取刚刚添加的a元素，并为其绑定单击响应函数				
    					var a = tr.getElementsByTagName("a")[0];
    					a.onclick = delA;
    
    					//获取table
    					var employeeTable = document.getElementById("employeeTable");
    					//获取employeeTable中的tbody
    					var tbody = employeeTable.getElementsByTagName("tbody")[0];
    					//将tr添加到tbodye中
    					tbody.appendChild(tr);
    					/* tbody.innerHTML += "<tr>" +
    						"<td>" + name + "</td>" +
    						"<td>" + email + "</td>" +
    						"<td>" + salary + "</td>" +
    						"<td><a href='javascript:;'>Delete</a></td>"
    						+
    						"</tr>"; */
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<table id="employeeTable">
    			<tr>
    				<th>Name</th>
    				<th>Email</th>
    				<th>Salary</th>
    				<th> </th>
    			</tr>
    			<tr>
    				<td>Tom</td>
    				<td>tom@tom.com</td>
    				<td>5000</td>
    				<td>
    					<a href="javascript:;">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Jerry</td>
    				<td>jerry@sohu.com</td>
    				<td>8000</td>
    				<td>
    					<a href="deleteEmp?id=002">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Bob</td>
    				<td>bob@tom.com</td>
    				<td>10000</td>
    				<td>
    					<a href="deleteEmp?id=003">Delete</a>
    				</td>
    			</tr>
    		</table>
    		<div id="formDiv">
    			<h4>添加新员工</h4>
    			<table>
    				<tr>
    					<td class="word">name: </td>
    					<td class="inp">
    						<input type="text" name="empName" id="empName" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">email: </td>
    					<td class="inp">
    						<input type="text" name="email" id="email" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">salary: </td>
    					<td class="inp">
    						<input type="text" name="salary" id="salary" />
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<button id="addEmpButton">
    							Submit
    						</button>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>

# P106 106.尚硅谷\_JS基础\_a的索引问题 06:49 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![20210122071607481.png][]

# P107 107.尚硅谷\_JS基础\_操作内联样式 16:42 #

## CSS 背景属性（Background） ##

> ![202101220724025.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

## 通过JS修改元素的样式【语法：元素.style.样式名 = 样式值】 ##

> 1.  通过JS修改元素的样式： 语法：元素.style.样式名 = 样式值
> 2.  注意：如果CSS的样式名中含有-(减法操作)，这种名称在JS中是不合法的,比如background-color，需要将这种样式名修改为驼峰命名法，去掉“-”，然后将-后的字母大写。
> 3.  我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。
> 4.  但是如果在样式中写了“!important”，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。
> 
> ![20210122072452863.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]

## 读取标签的样式【语法：元素.style.样式名;】 ##

> 1.  //读取box1的样式   语法：元素.style.样式名;
> 2.  通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    				 * 点击按钮以后，修改box1的大小
    				 */
    				//获取box1
    				var box1 = document.getElementById("box1");
    				//为按钮绑定单击响应函数
    				var btn01 = document.getElementById("btn01");
    				btn01.onclick = function() {
    					//修改box1的宽度
    					/*
    					 * 通过JS修改元素的样式：
    					 * 	语法：元素.style.样式名 = 样式值
    					 * 
    					 * 注意：如果CSS的样式名中含有-， // 减法操作
    					 * 		这种名称在JS中是不合法的,比如background-color
    					 * 		需要将这种样式名修改为驼峰命名法，
    					 * 		去掉-，然后将-后的字母大写
    					 * 
    					 * 我们通过style属性设置的样式都是内联样式，
    					 * 	而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
    					 * 
    					 * 但是如果在样式中写了!important，则此时样式会有最高的优先级，
    					 * 	即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
    					 * 	所以尽量不要为样式添加!important
    					 */
    					box1.style.width = "300px";
    					box1.style.height = "300px";
    					box1.style.backgroundColor = "yellow";
    				};
    				//点击按钮2以后，读取元素的样式
    				var btn02 = document.getElementById("btn02");
    				btn02.onclick = function() {
    					//读取box1的样式
    					/*
    					 * 	语法：元素.style.样式名;
    					 * 
    					 * 通过style属性设置和读取的都是内联样式
    					 * 	无法读取样式表中的样式
    					 */
    					//alert(box1.style.height);
    					alert(box1.style.width);
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<button id="btn01">点我一下</button>
    		<button id="btn02">点我一下2</button>
    		<br /><br />
    		<div id="box1"></div>
    	</body>
    </html>

# P108 108.尚硅谷\_JS基础\_获取元素的样式 24:56 #

## background-color 属性 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]

## 获取元素的当前显示的样式【语法：元素.currentStyle.样式名】IE浏览器 ##

>  *  获取元素的当前显示的样式
>  *  语法：元素.currentStyle.样式名
>  *  它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。
>  *  currentStyle只有IE浏览器支持，其他的浏览器都不支持。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]

## getComputedStyle()：获取元素当前的样式 ##

> 在其他浏览器中可以使用，getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。
> 
> 需要两个参数
> 
> 1.  第1个：要获取样式的元素
> 2.  第2个：可以传递一个伪元素，一般都传null
> 
> 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式。
> 
> 如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。
> 
> 但是该方法不支持IE8及以下的浏览器，通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]

# P109 109.尚硅谷\_JS基础\_getStyle()方法 10:05 #

## 同时兼容IE8与其它浏览器 ##

> 不需要判断浏览器版本，只需要判断当前浏览器有没有getComputedStyle()方法即可。
> 
>  *  getComputedStyle 不加 window：是变量，需要去作用域寻找。变量没找到，会报错。
>  *  getComputedStyle     加 window，成为window对象的属性。属性没找到，返回undefined。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16][]

## 实验代码 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				height: 100px;
    				background-color: yellow;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				//点击按钮以后读取box1的样式
    				var box1 = document.getElementById("box1");
    				var btn01 = document.getElementById("btn01");
    				btn01.onclick = function() {
    					//读取box1的宽度
    					//alert(box1.style.width);
    					// alert(box1.currentStyle.width);
    					//box1.currentStyle.width = "200px";
    					//alert(box1.currentStyle.backgroundColor);
    
    
    					//var obj = getComputedStyle(box1, null);
    					// alert(getComputedStyle(box1, null).width);
    					//正常浏览器的方式
    					//alert(getComputedStyle(box1, null).backgroundColor);
    
    					//IE8的方式
    					//alert(box1.currentStyle.backgroundColor);
    					// alert(getStyle(box1, "width"));
    					var w = getStyle(box1, "width");
    					alert(w);
    				};
    			};
    			/*
    			 * 定义一个函数，用来获取指定元素的当前的样式
    			 * 参数：
    			 * 		obj 要获取样式的元素
    			 * 		name 要获取的样式名
    			 */
    			function getStyle(obj, name) {
    				if (window.getComputedStyle) {
    					//正常浏览器的方式，具有getComputedStyle()方法
    					return getComputedStyle(obj, null)[name];
    				} else {
    					//IE8的方式，没有getComputedStyle()方法
    					return obj.currentStyle[name];
    				}
    				//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
    			}
    		</script>
    	</head>
    	<body>
    		<button id="btn01">点我一下</button>
    		<br /><br />
    		<div id="box1"></div>
    	</body>
    </html>

# P110 110.尚硅谷\_JS基础\_其他样式相关的属性 48:04 #

## DOM Element 对象 ##

> ![20210122091530300.png][]  ![20210122091554924.png][]
> 
> ![20210122091439726.png][]
> 
> ![20210122091635559.png][]
> 
> ![20210122094458663.png][]

### ① element.clientWidth、element.clientHeight ###

> **clientWidth、clientHeight**
> 
> 1.  这两个属性可以获取元素的可见宽度和高度。
> 2.  这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
> 3.  会获取元素宽度和高度，包括内容区和内边距。
> 4.  这些属性都是只读的，不能修改。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19][]

### ② offsetWidth、offsetHeight ###

> **offsetWidth、offsetHeight**：获取元素的整个的宽度和高度，包括内容区、内边距和边框。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20][]

### ③ offsetParent：获取当前元素的定位父元素 ###

> **offsetParent**
> 
> 1.  可以用来获取当前元素的定位父元素。
> 2.  会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则返回body。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21][]  static、absolute、 relative、fixed

### ④ offsetLeft、offsetTop ###

>  *  **offsetLeft**：当前元素相对于其定位父元素的水平偏移量
>  *  **offsetTop**：当前元素相对于其定位父元素的垂直偏移量
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22][]

### ⑤ scrollWidth、scrollHeight ###

> **scrollWidth、scrollHeight**：可以获取元素整个滚动区域的宽度和高度
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23][]

### ⑥ scrollLeft、scrollTop ###

>  *  **scrollLeft**：可以获取水平滚动条滚动的距离。
>  *  **scrollTop**：可以获取垂直滚动条滚动的距离。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25][]

## ①~⑥ 练习代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				padding: 10px;
    				border: 10px solid yellow;
    			}
    			#box2 {
    				padding: 100px;
    				background-color: #bfa;
    			}
    			#box4 {
    				width: 200px;
    				height: 300px;
    				background-color: #bfa;
    				overflow: auto;
    			}
    			#box5 {
    				width: 450px;
    				height: 600px;
    				background-color: yellow;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				var box1 = document.getElementById("box1");
    				var btn01 = document.getElementById("btn01");
    				var box4 = document.getElementById("box4");
    
    				btn01.onclick = function() {
    					/*
    					 * clientWidth
    					 * clientHeight
    					 * 	- 这两个属性可以获取元素的可见宽度和高度
    					 * 	- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
    					 * 	- 会获取元素宽度和高度，包括内容区和内边距
    					 *  - 这些属性都是只读的，不能修改
    					 */
    					// alert(box1.clientWidth);
    					// alert(box1.clientHeight);
    					// box1.clientHeight = 300;
    
    					/*
    					 * offsetWidth
    					 * offsetHeight
    					 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
    					 */
    					// alert(box1.offsetWidth);
    
    					/*
    					 * offsetParent
    					 * 	- 可以用来获取当前元素的定位父元素
    					 *  - 会获取到离当前元素最近的开启了定位的祖先元素
    					 * 		如果所有的祖先元素都没有开启定位，则返回body
    					 */
    					// var op = box1.offsetParent;
    					// alert(op.id);
    
    					/*
    					 * offsetLeft
    					 * 	- 当前元素相对于其定位父元素的水平偏移量
    					 * offsetTop
    					 * 	- 当前元素相对于其定位父元素的垂直偏移量
    					 */
    					// alert(box1.offsetLeft);
    
    					/*
    					 * scrollWidth
    					 * scrollHeight
    					 * 	- 可以获取元素整个滚动区域的宽度和高度
    					 */
    					// alert(box4.clientHeight);
    					// alert(box4.scrollWidth);
    
    					/*
    					 * scrollLeft
    					 * 	- 可以获取水平滚动条滚动的距离
    					 * scrollTop
    					 * 	- 可以获取垂直滚动条滚动的距离
    					 */
    					// alert(box4.scrollLeft);
    					// alert(box4.scrollTop);
    
    					// alert(box4.clientHeight); // 283
    
    					//当满足scrollHeight - scrollTop == clientHeight
    					//说明垂直滚动条滚动到底了
    
    					//当满足scrollWidth - scrollLeft == clientWidth
    					//说明水平滚动条滚动到底
    					// alert(box4.scrollHeight - box4.scrollTop); // 600
    				};
    			};
    		</script>
    	</head>
    	<body id="body">
    		<button id="btn01">点我一下</button>
    		<br /><br />
    		<div id="box4">
    			<div id="box5"></div>
    		</div>
    		<br /><br />
    		<div id="box3">
    			<div id="box2" style="position: relative;">
    				<div id="box1"></div>
    			</div>
    		</div>
    	</body>
    </html>

## 滚动条练习【用户将滚动条滚到底，可进行注册】 ##

> ![20210122101531813.png][]

### checkbox 对象：disabled属性 ###

> ![20210122102913295.png][]
> 
> ![20210122103021986.png][]

### 用户阅读协议，且滚动条滚到底，才可以进行注册——代码and运行截图 ###

> ![20210122103205987.png][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#info {
    				width: 300px;
    				height: 500px;
    				background-color: #bfa;
    				overflow: auto;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    				 * 当垂直滚动条滚动到底时使表单项可用
    				 * onscroll
    				 * 	- 该事件会在元素的滚动条滚动时触发
    				 */
    				//获取id为info的p元素
    				var info = document.getElementById("info");
    				//获取两个表单项
    				var inputs = document.getElementsByTagName("input");
    				//为info绑定一个滚动条滚动的事件
    				info.onscroll = function() {
    					//检查垂直滚动条是否滚动到底
    					if (info.scrollHeight - info.scrollTop == info.clientHeight) {
    						//滚动条滚动到底，使表单项可用
    						/*
    						 * disabled属性可以设置一个元素是否禁用，
    						 * 	如果设置为true，则元素禁用
    						 * 	如果设置为false，则元素可用
    						 */
    						inputs[0].disabled = false;
    						inputs[1].disabled = false;
    					}
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<h3>欢迎亲爱的用户注册</h3>
    		<p id="info">
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    			亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
    		</p>
    		
    		<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守！
    		<input type="submit" value="注册" disabled="disabled" />
    	</body>
    </html>

# P111 111.尚硅谷\_JS基础\_事件对象 18:02 #

## 移动鼠标，以px显示距离 ##

> ![20210122104003938.png][]
> 
> ![20210122104951158.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28][]
> 
> ![2021012210572012.png][]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Insert title here</title>
    		<style type="text/css">
    			#areaDiv {
    				border: 1px solid black;
    				width: 300px;
    				height: 50px;
    				margin-bottom: 10px;
    			}
    
    			#showMsg {
    				border: 1px solid black;
    				width: 300px;
    				height: 20px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				// 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
    
    				//获取两个div
    				var areaDiv = document.getElementById("areaDiv");
    				var showMsg = document.getElementById("showMsg");
    				/*
    				 * onmousemove
    				 * 	- 该事件将会在鼠标在元素中移动时被触发
    				 * 
    				 * 事件对象
    				 * 	- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
    				 * 	   在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。
    				 */
    				areaDiv.onmousemove = function(event) {
    					/*
    					 * 在IE8中，响应函数被触发时，浏览器不会传递事件对象，
    					 * 	在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
    					 */
    					/*if(!event){
    						event = window.event;
    					}*/
    
    					//解决事件对象的兼容性问题
    					event = event || window.event;
    					// 第1个为true，不看第2个；第1个为false，返回第2个
    
    					/*
    					 * clientX可以获取鼠标指针的水平坐标
    					 * cilentY可以获取鼠标指针的垂直坐标
    					 */
    					var x = event.clientX;
    					var y = event.clientY;
    					// alert("x = " + x + " , y = " + y);
    
    					//在showMsg中显示鼠标的坐标
    					showMsg.innerHTML = "x = " + x + " , y = " + y;
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<div id="areaDiv"></div>
    		<div id="showMsg"></div>
    	</body>
    </html>

# P112 112.尚硅谷\_JS基础\_div跟随鼠标移动 23:33 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 29][]
> 
>  *  事件绑定给box1，只有鼠标在box1中 才会触发。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 30][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute; /* 开启box1的绝对定位 */
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    				 * 使div可以跟随鼠标移动
    				 */
    				//获取box1
    				var box1 = document.getElementById("box1");
    				//绑定鼠标移动事件
    				document.onmousemove = function(event) {
    					//解决兼容问题
    					event = event || window.event;
    					//获取滚动条滚动的距离
    					/*
    					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
    					 * 火狐等浏览器认为浏览器的滚动条是html的，
    					 */
    					var st = document.body.scrollTop || document.documentElement.scrollTop;
    					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
    					//var st = document.documentElement.scrollTop;
    
    					//获取到鼠标的坐标
    					/*
    					 * clientX和clientY
    					 * 	用于获取鼠标在当前的可见窗口的坐标
    					 * div的偏移量，是相对于整个页面的
    					 * 
    					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
    					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
    					 */
    					var left = event.clientX;
    					var top = event.clientY;
    					//设置div的偏移量
    					box1.style.left = left + sl + "px";
    					box1.style.top = top + st + "px";
    				};
    			};
    		</script>
    	</head>
    	<body style="height: 1000px;width: 2000px;">
    		<div id="box1"></div>
    	</body>
    </html>

# P113 113.尚硅谷\_JS基础\_事件的冒泡 15:52 #

## 事件的冒泡（Bubble） ##

> 事件的冒泡（Bubble）
> 
>  *  所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
>  *  在开发中大部分情况冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

## 事件冒泡-案例1 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 31][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 200px;
    				height: 200px;
    				background-color: yellowgreen;
    			}
    			#s1 {
    				background-color: yellow;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				//为s1绑定一个单击响应函数
    				var s1 = document.getElementById("s1");
    				s1.onclick = function(event) {
    					event = event || window.event;
    					alert("我是span的单击响应函数");
    					//取消冒泡
    					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
    					event.cancelBubble = true;
    				};
    
    				//为box1绑定一个单击响应函数
    				var box1 = document.getElementById("box1");
    				box1.onclick = function(event) {
    					event = event || window.event;
    					alert("我是div的单击响应函数");
    					event.cancelBubble = true;
    				};
    
    				//为body绑定一个单击响应函数
    				document.body.onclick = function() {
    					alert("我是body的单击响应函数");
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<div id="box1">
    			我是box1！
    			<span id="s1">我是span！</span>
    		</div>
    	</body>
    </html>

## 事件冒泡-案例2 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 32][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute; /* 开启box1的绝对定位 */
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    				 * 使div可以跟随鼠标移动
    				 */
    				//获取box1
    				var box1 = document.getElementById("box1");
    				//绑定鼠标移动事件
    				document.onmousemove = function(event) {
    					//解决兼容问题
    					event = event || window.event;
    					//获取滚动条滚动的距离
    					/*
    					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
    					 * 火狐等浏览器认为浏览器的滚动条是html的，
    					 */
    					var st = document.body.scrollTop || document.documentElement.scrollTop;
    					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
    					//var st = document.documentElement.scrollTop;
    
    					//获取到鼠标的坐标
    					/*
    					 * clientX和clientY
    					 * 	用于获取鼠标在当前的可见窗口的坐标
    					 * div的偏移量，是相对于整个页面的
    					 * 
    					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
    					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
    					 */
    					var left = event.clientX;
    					var top = event.clientY;
    					//设置div的偏移量
    					box1.style.left = left + sl + "px";
    					box1.style.top = top + st + "px";
    				};
    
    				var box2 = document.getElementById("box2");
    				box2.onmousemove = function(event) {
    					event = event || window.event;
    					event.cancelBubble = true;
    				};
    			};
    		</script>
    	</head>
    	<body style="height: 1000px;width: 2000px;">
    		<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
    		<div id="box1"></div>
    	</body>
    </html>

> 今天，5:14 就醒了。躺倒5:55，起床，学习。中午11:48 \[103~113\] ，看完。

[Link 1]: http://www.gulixueyuan.com/my/course/58
[JavaScript_140_JS]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript_JavaScript_140_JS]: https://blog.csdn.net/weixin_44949135/article/details/108621932
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221119/1a9ee82d803c42029c027a08f2bbebca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/937550f82dfe43da814727215225003f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210122065704275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221119/bca00f7a21984aefa0bcbc93dc0193ab.png
[2021012207000978.png]: /images/20221119/d40cfa22c2534ec98136d389e7448767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221119/6687e052817e4a2ca2679f6543c8a325.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210122070516383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210122071041189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122071607481.png]: https://img-blog.csdnimg.cn/20210122071607481.png
[202101220724025.png]: https://img-blog.csdnimg.cn/202101220724025.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210122072340966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122072452863.png]: https://img-blog.csdnimg.cn/20210122072452863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210122072605546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210122072655301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210122073026949.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210122084027236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210122084520273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210122084324893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210122085155294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210122085402290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210122090903646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210122091242420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122091530300.png]: https://img-blog.csdnimg.cn/20210122091530300.png
[20210122091554924.png]: https://img-blog.csdnimg.cn/20210122091554924.png
[20210122091439726.png]: https://img-blog.csdnimg.cn/20210122091439726.png
[20210122091635559.png]: https://img-blog.csdnimg.cn/20210122091635559.png
[20210122094458663.png]: https://img-blog.csdnimg.cn/20210122094458663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20210122092055925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20210122092215242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/2021012209302987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20210122093349437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20210122094146596.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20210122095024511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20210122095301491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/202101221003239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122101531813.png]: https://img-blog.csdnimg.cn/20210122101531813.png
[20210122102913295.png]: https://img-blog.csdnimg.cn/20210122102913295.png
[20210122103021986.png]: https://img-blog.csdnimg.cn/20210122103021986.png
[20210122103205987.png]: https://img-blog.csdnimg.cn/20210122103205987.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26]: https://img-blog.csdnimg.cn/20210122103239730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27]: https://img-blog.csdnimg.cn/20210122103311615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122104003938.png]: https://img-blog.csdnimg.cn/20210122104003938.png
[20210122104951158.png]: https://img-blog.csdnimg.cn/20210122104951158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28]: https://img-blog.csdnimg.cn/20210122105325791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[2021012210572012.png]: https://img-blog.csdnimg.cn/2021012210572012.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 29]: https://img-blog.csdnimg.cn/20210122111535576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 30]: https://img-blog.csdnimg.cn/20210122112224714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 31]: https://img-blog.csdnimg.cn/20210122163709574.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 32]: https://img-blog.csdnimg.cn/20210122114624236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70