66

I am using aspx. If I have HTML as follows:

<div id="classMe"></div>

I am hoping to dynamically add a css class through the code behind file, ie on Page_Load. Is it possible?

A-Sharabiani
  • 17,750
  • 17
  • 113
  • 128
DanDan
  • 10,462
  • 8
  • 53
  • 69

7 Answers7

127

If you want to add attributes, including the class, you need to set runat="server" on the tag.

    <div id="classMe" runat="server"></div>

Then in the code-behind:

classMe.Attributes.Add("class", "some-class")
Chris Haas
  • 53,986
  • 12
  • 141
  • 274
  • Thanks, I was sure it would be this simple. – DanDan Dec 14 '09 at 21:45
  • does this overwrite existing classes? – DevDave Mar 06 '13 at 12:50
  • 1
    @Tyler, no. This adds a new class name to the control. You can also use `Clear` and `Remove` on the `Attributes` collection. http://msdn.microsoft.com/en-US/library/system.web.ui.attributecollection(v=vs.100).aspx – Chris Haas Mar 06 '13 at 13:54
  • 6
    I'm not sure if i'm missing something, but if you have a class on the initial div (eg. `
    `, the original class declaration is wiped out and you're left with just `class="some-class"` using the code above....seems to contradict @chris-haas's last comment     – jaminto Apr 18 '13 at 18:33
  • 29
    if you want to preserve existing classes, you need to do something like: `classMe.Attributes.Add("class", classMe.Attributes["class"] + " some-class"` to not overwrite what you already have – jaminto Apr 18 '13 at 18:47
  • 2
    @DevDave This does override existing classes because you are changing the entire class attribute. This is the same as [setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute) in javascript. "Adds a new attribute or changes the value of an existing attribute" – styfle Jul 06 '13 at 07:57
  • This still works in 2021. I have the misfortune of working with severely old code but this answer helped me out. – CaptainGenesisX Feb 09 '21 at 19:20
17

If you're not using the id for anything other than code-behind reference (since .net mangles the ids), you could use a panel control and reference it in your codebehind:

<asp:panel runat="server" id="classMe"></asp:panel>

classMe.cssClass = "someClass"
Jason
  • 51,583
  • 38
  • 133
  • 185
10

Assuming your div has some CSS classes already...

<div id="classMe" CssClass="first"></div>

The following won't replace existing definitions:

ClassMe.CssClass += " second";

And if you are not sure until the very last moment...

string classes = ClassMe.CssClass;
ClassMe.CssClass += (classes == "") ? "second" : " second";
Marc.2377
  • 7,807
  • 7
  • 51
  • 95
4
controlName.CssClass="CSS Class Name";

working example follows below

txtBank.CssClass = "csError";
Jontas
  • 409
  • 3
  • 12
Anwar
  • 41
  • 1
4
BtnAdd.CssClass = "BtnCss";

BtnCss should be present in your Css File.

(reference of that Css File name should be added to the aspx if needed)

Jontas
  • 409
  • 3
  • 12
Veerendranath Darsi
  • 41
  • 1
2

Syntax:

controlName.CssClass="CSS Class Name";

Example:

txtBank.CssClass = "csError";
Marc.2377
  • 7,807
  • 7
  • 51
  • 95
Kishor Makwana
  • 31
  • 1
0

If you want to retain the existing class, this would work:

string existingClass = classMe.Attributes["class"];
classMe.CssClass = existingClass + " some-class";
Elikill58
  • 4,050
  • 24
  • 23
  • 45
John Oscar Cervantes
  • 1