改变按钮样式：JS鼠标操作-优快云博客

本文探讨了ASP.NET页面中按钮与自定义div元素的交互事件处理，通过JavaScript脚本实现鼠标悬停、点击及按下状态的动态样式变化，展示了前端开发中交互与样式的动态管理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台页面：

代码

< asp:Button ID = " Button1 " runat = " server " Text = " Button " CssClass = " CommonButton " />
< br />
< div id = " btColor " class = " CommonButton " onclick = " OnMouseDown() " onmouseover = " OnMouseEnter() " onmouseout = " OnMouseLeave() " > click me
</ div >

JS脚本:

代码

< script src = " ClientLibrary.js " type = " text/javascript " ></ script >
     < script type = " text/javascript " >
        function OnMouseEnter() {
            var div = document.getElementById( " btColor " );
            div.className = " FloatButton " ;
        }
        function OnMouseLeave() {
            var div = document.getElementById( " btColor " );
            div.className = " CommonButton " ;
        }
        function OnMouseDown() {
            var div = document.getElementById( " btColor " );
            div.className = " PressdownButton " ;
        }

function Button(controlID) {
    debugger;
     this .Init = function () {
        var button = document.getElementById(controlID);
        alert(button);
        button.onclick = function () {
            button.className = " PressdownButton " ;
             return false ;
        }
        button.onmouseover = function () {
            button.className = " FloatButton " ;
        }
        button.onmouseout = function () {
            button.className = " CommonButton " ;
        }
    }
}
        var button = null ;
        window.onload = function () {
            button = new Button( " Button1 " );
            button.Init();
        }
     </ script >

转载于:https://www.cnblogs.com/caoshuai/archive/2010/07/11/1775266.html