ITPub博客

首页 > IT职业 > IT图书 > 事件响应,移除和增加样式。

事件响应,移除和增加样式。

IT图书 作者:greatleaf 时间:2021-09-09 08:58:01 0 删除 编辑

JavaScript的写法:

function addClass(dom,className){
        if(dom){
            var classname=dom.className;
            var reg=new RegExp(className,'g');
            classname=classname.replace(reg,'').replace(/s+$/,'');
            dom.className=classname+' '+className;
        }
    }
    function removeClass(dom,className){
        if(dom){
            var reg=new RegExp(className,'g');
            dom.className=dom.className.replace(reg,'');
        }
    }
    username.onclick=function(){
        addClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };
    username.onfocus=function(){
        addClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };
    username.onmouseover=function(){
        removeClass(username,"inputFocusClass");
        addClass(username,"inputHoverClass");
    };
    username.onblur=function(){
        removeClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };
    username.onmouseleave=function(){
        removeClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };

JQuery的写法

 $("input").click(function(){
          $(this).addClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });
      $("input").focus(function(){
          $(this).addClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });
      $("input").mouseover(function(){
          $(this).removeClass("inputFocusClass");
          $(this).addClass("inputHoverClass");
      });
      $("input").blur(function(){
          $(this).removeClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });
      $("input").mouseleave(function(){
          $(this).removeClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4236/viewspace-2807529/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-12

  • 博文量
    76
  • 访问量
    610