how to change the cssclass of a div after press a button in asp.net c#?

Question

I am trying to change the background of a div after clicking a button. this are the codes. Div I want to change color:

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

 </div>

and CSS for it:

#example1 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: orange;
    width: 310px;
    height: 34px;
    color: white;

    border-radius: 4px;
}

I want to change it to this:

#example2 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: red;
    width: 380px;
    height: 38px;
    color: white;

    border-radius: 4px;
}

I tried to write some code at Page.aspx.cs

example1.CssClass = "example2";

but looks like CssClass is not a function of the div. how can I add it? or whats a way to do it on C#?

Christos · Accepted Answer · 2016-11-14 20:19:01Z

2

You don't have to go back to server, in order to change the color of your div. This can be done solely on client by writing a simple script:

var example1 = document.getElementById("example1");

example1.addEventListener("click", function(){
    this.className = "example2";
});

.example2 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: red;
    width: 380px;
    height: 38px;
    color: white;

    border-radius: 4px;
}

<div id="example1" runat="server">
  sample text
</div>

Important Note

In your case, since your div is a server side control, (runat="server"), the id that is generated before the page is sent to the client is not example1. So in the script I presented above we have to make a change:

var example1 = document.getElementById("<%= example1.ClientID%>");

edited Nov 14, 2016 at 20:19

answered Nov 14, 2016 at 19:14

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

berg96 Over a year ago

runat=sever was just to call the div in the page.aspx.cs is not important for the code. can be removed without a problem. thats javascript?

Christos Over a year ago

@AltjenB. If you don't need it, then the snippet's code does exactly that you want. The snippet does this with plain JavaScript.

berg96 Over a year ago

Hey @Christos. can you update the code with an other function? I mean. when I press button1. and textbox1 and textbox2 are wrong it will turn red (or go to the example2 css class) and after textbox1 is clicked it will change to example1

berg96 Over a year ago

the code you gave me changes the class when I press the textbox. but not the button. and I am not understanding how to give the button1 function click to do the click

johnniebenson Over a year ago

Don't forget that IDs are more specific than classes so you may have a specificity issue with this solution. I would just give the default a class of example1 and only style the classes...leave IDs out of it.

JuanR · Accepted Answer · 2016-11-14 19:19:15Z

0

For this answer, I will assume based on your code that you will be handling the click event on the back end.

The issue is your CSS is targeting the elements by id but you are trying to assign a CSS class by name.

First, change your div to use the class by name:

<div id="example1" class="example1" runat="server">

</div>

(The name of the class is your choice. I just used the same for simplicity)

Then change your CSS classes to NOT target an id:

.example2 {
    position: absolute;
    z-index: 5;
    top:0;
    background-color: red;
    width: 380px;
    height: 38px;
    color: white;
    border-radius: 4px;
}

Notice the period (.) instead of the hash (#).

answered Nov 14, 2016 at 19:19

JuanR

7,8911 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

how to change the cssclass of a div after press a button in asp.net c#?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related