Add CSS class to a div in code behind

Question

I have a div and I am trying to add a CSS class to it in code but I receive the following error when I try

Property or indexer 'System.Web.UI.HtmlControls.HtmlControl.Style' cannot be assigned to -- it is read only

I am using the following code:

protected void BTNEvent_Click(object sender, ImageClickEventArgs e)
{
    BtnventCss.Style= "hom_but_a";                 
}

Can anyone please help me?

score 55 · Accepted Answer · edited Jun 05 '17 at 08:31

What if:

 <asp:Button ID="Button1" runat="server" CssClass="test1 test3 test-test" />

To add or remove a class, instead of overwriting all classes with

   BtnventCss.CssClass = "hom_but_a"

keep the HTML correct:

    string classname = "TestClass";

    // Add a class
    BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       );

     // Remove a class
     BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       );

This assures

The original classnames remain.
There are no double classnames
There are no disturbing extra spaces

Especially when client-side development is using several classnames on one element.

In your example, use

   string classname = "TestClass";

    // Add a class
    Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       ));

     // Remove a class
     Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       ));

You should wrap this in a method/property ;)

Just to point that if the button have no class set to it by the time you call Button1.Attributes["class"], it returns null. — Gabriel Rainha, Feb 01 '17 at 13:46

score 36 · Answer 2 · edited Mar 23 '22 at 09:33

36

<div runat="server"> is mapped to a HtmlGenericControl.

Try using:

BtnventCss.Attributes.Add("class", "hom_but_a");

edited Mar 23 '22 at 09:33

SharpC

6,974
4
45
40

answered Sep 18 '10 at 14:50

Vinay B R

8,089
2
30
45

score 10 · Answer 3 · edited Jun 05 '17 at 08:34

For a non ASP.NET control, i.e. HTML controls like div, table, td, tr, etc. you need to first make them a server control, assign an ID, and then assign a property from server code:

ASPX page

<head>
    <style type="text/css">
        .top_rounded
        {
            height: 75px;
            width: 75px;
            border: 2px solid;
            border-radius: 5px;
            -moz-border-radius: 5px; /* Firefox 3.6 and earlier */
            border-color: #9c1c1f;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server" id="myDiv">This is my div</div>
    </form>
</body>

CS page

myDiv.Attributes.Add("class", "top_rounded");

This seems to replace all classes not just add one – Aaron Nov 13 '17 at 21:25 — Aaron, Nov 13 '17 at 21:25

score 8 · Answer 4 · edited Jun 05 '17 at 08:32

8

The Style property gets a collection of all the cascading style sheet (CSS) properties; you cannot set it.

Try BtnventCss.CssClass = "hom_but_a"; instead.

I'm assuming BtnventCss is a WebControl.

I have just seen you're probably using <div runat="server"...

If so, you can try:

BtnventCss.Attributes.Add("class", "hom_but_a");

You could make the div an asp:panel - they will render the same and you'll get better server-side support.

edited Jun 05 '17 at 08:32

Peter Mortensen

30,738
21
105
131

answered Sep 18 '10 at 14:25

Joe Ratzer

18,176
3
37
51

1

Wouldn't that generate style="class: hom_but_a" instead? – Ryan S Jul 29 '14 at 12:12

score 4 · Answer 5 · edited Jun 05 '17 at 08:35

Here are two extension methods you can use. They ensure any existing classes are preserved and do not duplicate classes being added.

public static void RemoveCssClass(this WebControl control, String css) {
  control.CssClass = String.Join(" ", control.CssClass.Split(' ').Where(x => x != css).ToArray());
}

public static void AddCssClass(this WebControl control, String css) {
  control.RemoveCssClass(css);
  css += " " + control.CssClass;
  control.CssClass = css;
}

Usage: hlCreateNew.AddCssClass("disabled");

Usage: hlCreateNew.RemoveCssClass("disabled");

score 2 · Answer 6 · edited May 17 '17 at 14:23

2

Button1.CssClass += " newClass";

This will not erase your original classes for that control. Try this, it should work.

edited May 17 '17 at 14:23

guenhter

11,255
3
35
66

answered May 17 '17 at 12:55

Prajakta Chindarkar

31
3

score 1 · Answer 7 · edited May 23 '17 at 12:34

1

To ADD classes to html elements see how to add css class to html generic control div?. There are answers similar to those given here but showing how to add classes to html elements.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 15 '16 at 13:14

Dov Miller

1,958
5
34
46

score 0 · Answer 8 · answered Dec 03 '19 at 02:58

0

I'm also looking for the same solution. And I think of

BtnventCss.CssClass = BtnventCss.CssClass + " hom_but_a";

It seems working fine but I'm not sure if it is a good practice

answered Dec 03 '19 at 02:58

asmasyakirah

115
3
11

Add CSS class to a div in code behind

8 Answers8

ASPX page

CS page

Linked