onmouseout和onmouseover

Question

我正在做涉及使用javascript的家庭作业。我的家庭作业的一部分是使用事件处理程序onmouseout和onmouseouver。当用户将鼠标悬停在特定的div元素上时，字体大小增加了25%，当用户将鼠标移出div元素时，字体大小恢复正常。我的问题是，是否可以将onmouseover函数和onmouseout函数合并到一个函数中？不知何故，这就是我的老师想让我们做的。到目前为止，我已经开始了这项工作。

function FontSize(x)
{
    x.style.fonstSize = large;
}

我也认为这不是将字体放大25%的正确代码，但我不确定如何在此函数中真正合并onmouseout。

Answer 1

作为一名教师，我99%地肯定，“一个函数”指的是一个改变字体大小的通用函数，而不是一个使用条件语句向后处理并确定它应该是onmouseout还是onmouseover的函数。

您的脚本应包含：

function resize(elem, percent) { elem.style.fontSize = percent; }

您的HTML应包含：

<div onmouseover="resize(this, '125%')" onmouseout="resize(this, '100%')"
Text within div..
</div>

注意:像这里这样的情况正是JavaScript使用关键字“this”的原因--这样我们就不需要使用复杂的document.getElementById()语句。

Answer 2

您可以使用"%“属性来控制字体大小，如下面的代码所述的here。

 document.getElementById("div1").onmouseover = function() {        
            document.getElementById("div1").style.fontSize  = "125%"
                        };

 document.getElementById("div1").onmouseout = function() {        
            document.getElementById("div1").style.fontSize  = "100%";
                        };

下面是可用的jsfiddle：http://jsfiddle.net/LxhdU/

Answer 3

是的你可以。对这两个事件调用相同的函数，并传递一个参数以指示字体大小应该增加还是减少。

ChangeFontSize = function(element, shouldIncreaseFontsize)
{
    var small=14;
    var large = small * 1.25;

    if(shouldIncreaseFontsize) {
         element.style.fontSize = large + "px";
    }
    else {
         element.style.fontSize = small + "px";
    }

}

http://jsfiddle.net/TMHbW/1/