以编程方式添加额外的 CSS 类

Question

我有一个文本框，其中有一个名为“required”的 Css 类。当用户单击按钮时，我想向名为“error”的文本框添加额外的 Css 类，而不删除“required”类。我想从代码隐藏中完成此任务。

Answer 1

我决定为 WebControl 创建扩展方法以获得通用解决方案。
这是我的代码：

public static class WebControlExtensions
{
    public static void AddCssClass(this WebControl control, string cssClass)
    {
        if (string.IsNullOrEmpty(control.CssClass))
        {
            control.CssClass = cssClass;
        }
        else
        {
            string[] cssClasses = control.CssClass.Split(' ');
            bool classExists = cssClasses.Any(@class => @class == cssClass);

            if (!classExists)
            {
                control.CssClass += " " + cssClass;
            }
        }
    }

    public static void RemoveCssClass(this WebControl control, string cssClass)
    {
        if (!string.IsNullOrEmpty(control.CssClass))
        {
            string[] cssClasses = control.CssClass.Split(' ');
            control.CssClass = string.Join(" ", cssClasses.Where(@class => @class != cssClass).ToArray());
        }
    }
}

Answer 2

您可以设置 ASP.NET 文本框控件的 CssClass 属性。要为一个元素添加多个 CSS 类，只需用空格分隔它：

MyTextBox.CssClass = "class1 class2";

您可以将其放在 OnClick 事件处理程序中：

<asp:TextBox ID="MyTextBox" runat="server" OnClick="MyTextBox_Click" />

然后在代码隐藏中：

void MyTextBox_Click(Object sender, EventArgs e) {
    MyTextBox.CssClass = "class1 class2";
}

Answer 3

这是一种使用函数删除 css 类的方法。添加一个类将非常相似。

public void RemoveCssClass(string className)
{
    string[] splitClasses = TextButton.CssClass.Split(' ');
    string separator = "";

    foreach (string _class in splitClasses)
    {
        if (_class != className)
        {
            TextButton.CssClass += separator + _class;
            separator = " ";
        }
    }

    if (TextButton.CssClass == className)
        TextButton.CssClass = "";
}

Answer 4

这是一个简单的 C# 方法，用于在 WebControl 中添加或删除 CssClass...

    public static void SetOrRemoveCssClass( WebControl control, string className, bool adding )
    {
        string[] splitClasses = control.CssClass.Split(' ');

        bool hasNow = splitClasses.Contains( className );
        if ( adding && !hasNow )
        {
            control.CssClass += " " + className;
        }
        else if ( !adding && hasNow )   // remove the CssClass attribute
        {
            control.CssClass = control.CssClass.Replace( className, "");
        }
        control.CssClass = control.CssClass.Replace("  "," ").Trim();
    }