我已经开始写出来了，我使用了和之前的问题一样的尺寸（100px×100px）。我现在只想使用Javascript，虽然我计划在将来的某个时候使用jQuery。我现在看到的主要问题是，在这一行(this.style.width)'this'还没有被定义，所以代码不知道'this'指的是div，我不知道如何使用事件监听器而不是使用事件监听器来实现。childNodes 我知道怎么做）。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
div {background-color: #999999;width: 100px;height: 100px;}
</style>
<title></title>
</head>
<body>
<div id="myDiv" onClick="handleClick(event)"></div>
<script src="js/main.js"></script>
</body>
</html>
/**
* Created by Mark M.G on 4/1/2015.
* n221
*/
function handleClick(event){
this.style.width = ( parseInt( this.style.width ) *1.2 ) + 'px';
this.style.height = ( parseInt( this.style.height ) *1.2 ) + 'px';
}
这是一个基于你的代码的纯JS工作方案。http:/jsfiddle.netoco94wrs1
HTML:
<div id="myDiv"></div>
CSS:
div {background-color: #999999;width: 100px;height: 100px;}
Javascript:
var div = document.getElementById('myDiv');
div.addEventListener('click', function (event) {
this.style.width = ( parseInt( this.offsetWidth ) *1.2 ) + 'px';
this.style.height = ( parseInt( this.offsetHeight ) *1.2 ) + 'px';
});
现在， this 是指实际的div，因为我直接将点击事件监听器分配给了div。在你的代码中， this 是指窗口对象，因为它在全局函数中。
另一个可能的解决方案是使用event.target。
尝试使用 this 而不是 event 在你 onClick 事件，并在事件处理程序中使用不同的参数名称，如''。element'以避免混淆 :) 然后替换成 this 的事件处理程序中，用参数名（'element'）来访问事件处理程序中的点击元素。