c# - 在 asp.net c# 中按下按钮后如何更改 div 的 cssclass？

Question

我想在单击按钮后更改 div 的背景。这是代码。我要改变颜色的div:

 <div id="example1" runat="server">

 </div>   

和它的 CSS:

#example1 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: orange;
    width: 310px;
    height: 34px;
    color: white;

    border-radius: 4px;
}

我想改成这样:

#example2 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: red;
    width: 380px;
    height: 38px;
    color: white;

    border-radius: 4px;
}

我尝试在 Page.aspx.cs 中编写一些代码

example1.CssClass = "example2";

但看起来 CssClass 不是 div 的函数。我怎样才能添加它？或者有什么方法可以在 C# 上执行此操作？

Answer 1

您不必返回服务器来更改您的 div 的颜色。这可以通过编写一个简单的脚本仅在客户端上完成:

var example1 = document.getElementById("example1");

example1.addEventListener("click", function(){
    this.className = "example2";
});

.example2 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: red;
    width: 380px;
    height: 38px;
    color: white;

    border-radius: 4px;
}

<div id="example1" runat="server">
  sample text
</div>

重要提示

在您的情况下，由于您的 div 是服务器端控件 (runat="server")，因此在将页面发送到客户端之前生成的 id 不是 example1 。因此，在我上面介绍的脚本中，我们必须进行更改:

var example1 = document.getElementById("<%= example1.ClientID%>");