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的颜色。这可以通过编写一个简单的脚本在客户端完成：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

重要提示

在您的情况下，由于您的div是服务器端控件（runat="server"），因此在将页面发送到客户端之前生成的ID不是example1。因此，在我上面提到的脚本中，我们必须做出改变：

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

Answer 2

对于这个答案，我将根据您的代码假设您将在后端处理点击事件。

问题是你的CSS是按ID定位元素的，但是你试图按名称分配一个CSS类。

首先，更改您的div以按名称使用该类：

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

</div>

（类的名称是你的选择。我只是为了简单起见而使用了相同的名称）

然后将您的CSS类更改为NOT target id：

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

注意句点（。）而不是哈希（＃）。

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

2 个答案: