Javascript onClick 更改 ASP 页面上图像的边框

Question

我有一个包含 5 个 ASP 图像按钮的 ASP 页面。可以单击图像，然后在后面的代码中发生一些事情。我还希望在用户单击图像时用边框勾勒出图像轮廓，以便他们知道已选择一个图像。我正在使用 javascript 来完成带边框的轮廓。但我的问题是边框应用然后页面刷新并且边框消失了。我知道 Imagebuttons 会导致回发，但如何在回发后保留我的 ImageButtons 轮廓？

Javascript:

<script language="JavaScript" type="text/javascript">
    function chnageborder(imageid) 
    {
        document.getElementById(imageid).style.border = "solid 2px #2F74D0";
    }
</script>

ASP 图片按钮:

<asp:ImageButton 
            ID="Image1" runat="server" 
            style="width: 48px; height: 48px; margin-right: 5px;" OnClick="Image1_Click" OnClientClick="javascript:chnageborder('Image1'); return true;"/>

Answer 1

您必须在服务器端处理它。基本上，该样式可以应用于特定图像按钮单击事件的回发。

void Image1_Click()
{
Image1.Styles.Add("border" , "solid 2px #2F74D0");

//And you need to revert the styles of the other buttons if they already have the selected style

Image2.Style["border"] = "";
.
.
Image5.Style["border"] = "";

}

或者，如果您想以更简洁的方式进行操作，您可以采用一个 css 类并在后面的代码中应用该类，如下面的一个答案所建议的那样。您可能需要另一个 css 类来具有未选择的样式并应用与上面相同的样式以使它们看起来正常。