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

您可能不需要显式调用元素上的两个事件，而是您创建的扩展将执行此操作。扩展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');
    }
}

Answer 5

我会做一些简单的事情，如下所示。 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;

onmouseout和onmouseover

5 个答案:

更新