改变按钮样式:JS鼠标操作
前台页面:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
<br />
<div id ="btColor" class ="CommonButton" onclick="OnMouseDown()" onmouseover="OnMouseEnter()" onmouseout="OnMouseLeave()">click me
</div>
JS脚本:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
<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>