如何以编程方式更改 div 的样式答案

【问题标题】：How do you change the style of a div programmatically如何以编程方式更改 div 的样式
【发布时间】：2010-09-11 16:03:11
【问题描述】：

如何更改 div 的样式（颜色），如下所示？

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

【问题讨论】：

标签： asp.net asp.net-mvc

【解决方案1】：

试试这个：在 .aspx 文件中放置这些行

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

那么你可以使用例如

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

【讨论】：

【解决方案2】：

如果您想通过在浏览器中运行的客户端代码 (javascript) 更改 div 的颜色，请执行以下操作：

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

【讨论】：

【解决方案3】：

如果您想直接更改类而不是样式：即.. 使用您想要的样式创建另一个类...

myDiv.Attributes["class"] = "otherClassName"

【讨论】：

【解决方案4】：

您应该在 CSS 中设置颜色，然后以编程方式更改 CSS 类。例如：

(CSS)

div.Error {
  color:red;
}

(ASP.NET/VB)

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

【讨论】：

【解决方案5】：

看起来您正在编写 ASP，或者可能是 JSP。我对这两种语言都不太熟悉，但是无论您使用哪种语言，原理都是一样的。

如果您使用的颜色数量有限，那么通常的选择是创建多个类并在样式表中为它们编写规则集：


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

等等。

然后让您的服务器端脚本生成 HTML 以使 CSS 匹配：


<div class="important">

当然，您也应该ensure that the information is available through means other than colour。

如果颜色是在运行时确定的，那么你可以生成样式属性：


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

【讨论】：

【解决方案6】：

一般情况下可以直接做

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

有一个参考here。

【讨论】：

【解决方案7】：

那个代码片段并没有说太多 - 如果代码是服务器端的，你为什么不改变例如那里的 HTML 元素的类？

【讨论】：

【解决方案8】：

IMO 这是更好的方法。我在其他帖子中发现了其中一些，但这个在谷歌搜索中首先出现。

这部分适用于标准 JavaScript。我很确定您可以使用它来删除所有样式以及添加/覆盖。

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

或

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

这仅适用于 jQuery

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

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

【讨论】：