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/

Answer 4

我会做一些简单的事情，如下所示。 large 和 small 值可以是您需要它们以使字体大小起作用的任何值，也可以是您在之前的代码中定义的变量。

演示：http://jsfiddle.net/lucuma/EAbYn/

 function doHover(e) {
    if (e.type=='mouseover') {
          this.style.fontSize = "large";   
    } else {

          this.style.fontSize = "small";  
    }
}

var el = document.getElementById('myelement')
el.onmouseout =doHover;
el.onmouseover=doHover;

Answer 5

您可能不需要显式调用元素上的两个事件，而是您创建的扩展会这样做。扩展Element 的原型。 Jquery 也与此类似。

Ref Prototype

见小提琴：- http://jsfiddle.net/4fs7V/

Element.prototype.hover= function( fnOver, fnOut ) {

    this.onmouseover=fnOver;
    this.onmouseout=fnOut || fnOver;
        return this;
    };


document.getElementById('test').hover(function(){
                                         //do your mouseover stuff
                                                },
                                     function(){
                                           //do your mouseout stuff
                                     });

更新

同样可以通过一个功能实现：-

悬停在我身上

.largeFont {
    font-size:125%;
}

Element.prototype.hover = function (fnOver, fnOut) {
    this.onmouseover = fnOver;
    this.onmouseout = fnOut || fnOver;
    return this;
};

document.getElementById('test').hover(changeMe);

function changeMe()
{
    if(this.hasAttribute('class'))
    {
        this.removeAttribute('class');
    }
    else
    {
         this.setAttribute('class', 'largeFont');
    }
}