How do you change the style of a div programatically

Question

How do I change the style (color) of a div such as the following?

"<div id=foo class="ed" style="display: <%= ((foo.isTrue) ? string.Empty : "none") %>">
                        <%= ((foo.isTrue) ? foo.Name: "false foo") %>"`

Answer 1

That code fragment doesn't say much - if the code is server-side why don't you change e.g. the class of the HTML element there?

Answer 2

It looks like you are writing ASP, or maybe JSP. I'm not too familiar with either language, but the principles are the same no matter what language you are working in.

If you are working with a limited number of colours, then the usual option is to create a number of classes and write rule-sets for them in your stylesheet:

.important { background: red; }
.todo { background: blue; }

And so on.

Then have your server side script generate the HTML to make the CSS match:

<div class="important">

You should, of course, ensure that the information is available through means other than colour as well.

If the colours are determined at run time, then you can generate style attributes:

<div style="background-color: red;">

Answer 3

I updated the fragment, didn't show properly at first

Answer 4

You should set your colors in CSS, and then change the CSS class programatically. For example:

(CSS)

div.Error {
  color:red;
}

(ASP.NET/VB)

<div class='<%=Iif(HasError, "Error", "")%>'> .... </div>

Answer 5

Generally, you can do it directly

document.getElementById("myDiv").style.color = "red";

There's a reference here.

Answer 6

If you want to alter the color of the div with client side code (javascript) running in the browser, you do something like the following:

<script>
 var fooElement = document.getElementById("foo");
 fooElement.style.color = "red"; //to change the font color
</script>

Answer 7

Try this: in the .aspx file put thees lines

<div id="myDiv" runat="server">
    Some text
</div>

then you can use for example

myDiv.Style["color"] = "red";

Answer 8

Or for instance if you wanted to change the class instead of the style directly: ie.. create another class with the styling you want...

myDiv.Attributes("class") = "otherClassName"