ASP.NET动态设置css

来源：互联网发布：美国EPO网络编辑：程序博客网时间：2024/05/20 03:42

一、动态改变页面背景示例
参考文章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.styleSheet.addImport(turnback ? "stylesheet1.css" : "stylesheet2.css");出错

//    function setCSS() {
//        mycss.styleSheet.cssText = "";
//        mycss.styleSheet.addImport(turnback ? "stylesheet1.css" : "stylesheet2.css");
//        turnback = !turnback;
//    }

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <button onclick="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" %>

<!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>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:Button ID="Button1" runat="server" BackColor="White" CssClass="style1"
     onmouseover="this.className='style2'" onmouseout="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;
}