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

时间:2020-03-06 14:29:28  来源:igfitidea点击:

如何更改div的样式(颜色),如下所示?

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

解决方案

如果代码是服务器端的,那么该代码片段并没有说太多,为什么不更改例如HTML元素的类在那里?

看起来我们正在编写ASP或者JSP。我不太熟悉这两种语言,但是无论我们使用哪种语言,原则都相同。

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

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

等等。

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

<div class="important">

当然,我们应该确保可以通过颜色以外的其他方式获得信息。

如果颜色是在运行时确定的,则可以生成样式属性:

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

我们应该在CSS中设置颜色,然后以编程方式更改CSS类。例如:

(CSS)

div.Error {
  color:red;
}

(ASP.NET/VB)

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

通常,我们可以直接进行操作

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

这里有参考。

如果要使用浏览器中运行的客户端代码(javascript)更改div的颜色,请执行以下操作:

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

试试这个:
在.aspx文件中,将thees行

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

那么你可以使用例如

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

如果要直接更改类而不是样式:
即..用我们想要的样式创建另一个类...

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