How do you change the style of a div programmatica

问题:

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") %>"`

回答1:

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>

回答2:

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";

回答3:

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"

回答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>

回答5:

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;">

回答6:

Generally, you can do it directly

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

There's a reference here.

回答7:

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?

回答8:

IMO this is the better way to do it. I found some of this in other posts but this one comes up first in google search.

This part works for standard JavaScript. I am pretty sure you can use it to remove all styles as well as add/overwite.

var div = document.createElement('div');
div.style.cssText = "border-radius: 6px 6px 6px 6px; height: 250px; width: 600px";

OR

var div = document.getElementById('foo');
div.style.cssText = "background-color: red;";

This works for jQuery only

$("#" + TDDeviceTicketID).attr("style", "padding: 10px;");
$("#" + TDDeviceTicketID).attr("class", "roundbox1");

This works for removing it JQUERY
$("#" + TDDeviceTicketID).removeAttr("style");
$("#" + TDDeviceTicketID).removeAttr("class");