18前端基础 - JavaScript之this关键字

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88366236

JavaScript之this关键字

JavaScript中的 this , 表示当前元素,谁调用的函数,在函数中的this就代表谁。

案例:鼠标进入div和移出div显示不同的文本

效果:

鼠标在外面
鼠标在外面

鼠标在里面:
鼠标在里面

代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">

			var divElement;

			//init函数
			function init() {
				//在页面加载完毕之后,获取
				divElement = document.getElementById("div001");
				//动态绑定
				divElement.onmouseover = over;
				divElement.onmouseout = out;
			}

			//移入事件,把div的呵呵改成 嘿嘿
			function over() {
				//把div的呵呵 改为嘿嘿
				//divElement.innerHTML = "<font size='6' color='red'>嘿嘿</font>";
				this.innerHTML = "<font size='6' color='red'>嘿嘿</font>";
			}

			//移出事件,把dvi中的嘿嘿 又改回呵呵
			function out() {
				this.innerHTML = "呵呵";
				//divElement.innerHTML = "呵呵";
			}
		</script>
	</head>

	<body "init()">
		<div id="div001" style="border: 1px solid red; background-color: gray; width: 200px; height: 200px;">
			呵呵
		</div>
	</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_20042935/article/details/88366236