一、动态改变页面背景示例
参考文章 http://blog.sina.com.cn/s/blog_78106bb10100tc53.html
<html xmlns=" http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
</title>
<link id="mycss" rel="stylesheet" type="text/css" href="StyleSheet1.css" />
<script language ="javascript" type="text/javascript">
var turnback = false;
function setCSS()
{
参考文章 http://blog.sina.com.cn/s/blog_78106bb10100tc53.html
<html xmlns=" http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
</title>
<link id="mycss" rel="stylesheet" type="text/css" href="StyleSheet1.css" />
<script language ="javascript" type="text/javascript">
var turnback = false;
function setCSS()
{
if (turnback)
mycss.href= "StyleSheet2.css";
else
mycss.href = "StyleSheet1.css";
turnback = !turnback;
mycss.href= "StyleSheet2.css";
else
mycss.href = "StyleSheet1.css";
turnback = !turnback;
}
//为什么用 mycss.styleSheet.addImport(turnback ? "stylesheet1.css" : "stylesheet2.css");出错
// function setCSS() {
// mycss.styleSheet.cssText = "";
// mycss.styleSheet.addImport(turnback ? "stylesheet1.css" : "stylesheet2.css");
// turnback = !turnback;
// }
// mycss.styleSheet.cssText = "";
// mycss.styleSheet.addImport(turnback ? "stylesheet1.css" : "stylesheet2.css");
// turnback = !turnback;
// }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button οnclick="setCSS()" type="button">切换背景颜色</button>
</head>
<body>
<form id="form1" runat="server">
<div>
<button οnclick="setCSS()" type="button">切换背景颜色</button>
</div>
</form>
</body>
</html>
StyleSheet1.CSS文件中的代码
BODY
{
background-color: Black;
}
StyleSheet2.CSS文件中的代码
BODY
{
background-color: maroon;
}
二、动态改变按钮背景图片示例
参考文章http://blog.csdn.net/afeibacker/article/details/6491257
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
</form>
</body>
</html>
StyleSheet1.CSS文件中的代码
BODY
{
background-color: Black;
}
StyleSheet2.CSS文件中的代码
BODY
{
background-color: maroon;
}
二、动态改变按钮背景图片示例
参考文章http://blog.csdn.net/afeibacker/article/details/6491257
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" href="StyleSheet.css" rel="Stylesheet" />
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" href="StyleSheet.css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" BackColor="White" CssClass="style1"
οnmοuseοver="this.className='style2'" οnmοuseοut="this.className='style1'" Height="25px" Width="80px" />
</div>
</form>
</body>
</html>
StyleSheet.CSS文件中的代码
.style1
{
background-image: url(Save.jpg);
cursor: hand;
text-align: center;
border-style:none;
}
.style2
{
background-image:url(SaveHover.jpg);
background-repeat: no-repeat;
color: #203a85;
cursor: hand;
border-style:none;
}