我将使用哪种类型的事件处理程序来操纵 div 的大小？

Question

我已经想出如何使用事件处理程序来使用 onmouseover 来操纵颜色，但我不知道我会在这里更改什么以影响 divs 的大小.

我基本上有 5 个 div 都是绿色的，100x100 像素。我正在尝试操纵我的事件处理程序，使鼠标悬停的任何 div 增长到 150x150。

这是我目前拥有的，但我不知道要将 this.style.backgroundColor 更改为什么。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="category">

<div class="content">
    <h2>title here</h2>
    <p>content area</p>
</div>

<div class="content">
    <h2>title here</h2>
    <p>content area</p>
</div>

<div class="content">
    <h2>title here</h2>
    <p>content area</p>
</div>

<div class="content">
    <h2>title here</h2>
    <p>content area</p>
</div>

<div class="content">
    <h2>title here</h2>
    <p>content area</p>
 </div>

</div>

<style>
div {background-color: springgreen;}
div {width: 100px;}
div {height: 100px;}
</style>

</body>
<script src="js/main.js"></script>
</html>

和JavaScript

/**
* Created by Mark on 3/28/2015.
* 
*/

var category = document.getElementById("category");
for (var child = category.firstChild; child != null; child =               child.nextSibling) {
if (child.nodeType == 1 && child.className == "content") {
    child.onmouseover = function() {
        this.style.backgroundColor = "#FF0000";
    };

    child.onmouseout = function() {
        //let the original background show through.
        this.style.backgroundColor = "transparent";
    }


}
}

Answer 1

您可以为此设置一个自定义事件。如果你真的想要一个事件。或者你可以有一个简单的回调函数。

var elem = $(".content-area");
// $ is document.querSeletor() not jQuery
EventTarget.call(elem);

因此您的实际函数应如下所示：

function resized(elem, cb) {
   var eW = elem.offsetWidth,
       eH = elem.offsetHeight;
   setInterval(function() {
     if(elem.width != eW || elem.height != eH) {
        eW = elem.width; eH = elem.height;
      // either cb() or elem.fire();
     }
   }, 2000)
 }

或多或少，未经测试..

我将使用哪种类型的事件处理程序来操纵 div 的大小？

What type of event handler would I use to manipulate the size of a div?

html

javascript

dom-events

eventhandler