在按钮单击时更改 div 的背景颜色

Posted 2023-03-05

【中文标题】在按钮单击时更改 div 的背景颜色

【英文标题】：change background color of div on button click

【发布时间】：2015-11-06 03:02:07

【问题描述】：

在我后面的代码中，我正在生成 html 字符串

<a href='#' class='my-post' onclick='myFunc(" + Id + ")'>
     <div class='my-idea'>
        <span >23</span>
        <span class='heart'></span>
     </div>
</a>

我已经在下面的代码中实现了myFunc函数

funcString += "function myFunc(id)";
funcString += "document.getElementById(\"" + btn1.ClientID + "\").click();"; 
funcString += "";

然后在btn1点击事件我做一些处理

protected void btnSubmitWinnerPage_Click(object sender, EventArgs e)
    
      // some processing
    

现在我想在单击按钮时更改该 href 标记内 div 的背景颜色。我该如何实现？

【问题讨论】：

您可以添加具有所需颜色的 css 类。然后单击添加/删除该类，然后重新发送 html。但我认为 JQuery 中的某些东西在你的情况下会更好。您可以在 JQuery 中做同样的事情，但您不必调用您的服务器并重新加载。见jquery函数addClass/removeClass

@Guillaume Beauvois：是的，除了两件事：首先，jQuery 很慢，所以不要使用它。其次，“protected void btnSubmitWinnerPage_Click(object sender, EventArgs e)”表示他使用带有回发的 asp.net，所以 javascript 不会让他走得太远（点击后它会重新加载页面 - 点击时 HTTP 表单发布，就是这样asp.net 工作）...

【参考方案1】：

将 runat 服务器添加到您的 div，并给它一个 ID。

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

    </div>

然后你可以在代码隐藏中添加背景颜色，像这样：

this.mydiv.Style.Add("background-color", "#FF00FF");

如果您使用 JavaScript 添加背景颜色，例如像这样：

document.getElementById("mydiv").style.background = "#FF00FF";

然后它会被移除，因为在你的 JS 函数改变页面之后，postback-click-event 上的 postback 会重新加载页面...

顺便说一句，如果你使用 .NET 4.0，你可以使用 clientidmode="Static" 这样你就不需要了

document.getElementById("<%=btn1.ClientID %>").click(); 

像这样

<div runat="server" id="mydiv" clientidmode="Static">

我还建议您使用 AJAX（jQuery AJAX + ashx-handler + JSON，而不是 ms-ajax 控件）而不是回发来进行处理。 如果您使用回发，您网站的速度和可用性很可能会很糟糕。

【讨论】：

问题是我还有 2 个 div。所以我可以确定哪个 div 想要改变颜色，因为所有 div 的点击事件都是相同的

【参考方案2】：

您可以使用 Page.RegisterStartupScript 添加脚本以更改事件“protected void btnSubmitWinnerPage_Click(object sender, EventArgs e)”背后的代码的背景颜色

如果你使用jQuery，那么使用$('.my-idea').css('background-color', 'blue') 来改变div的背景颜色