我如何给div分配一个事件监听器,让div的宽度和高度在点击时增长20%。

我已经开始写出来了,我使用了和之前的问题一样的尺寸(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。

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/26070.html

(0)
上一篇 1天前
下一篇 1天前

相关推荐

发表评论

登录后才能评论