Javascript 在codebehind中动态创建css类

我有一个搜索页面，可以在多个地方使用，在我的网站上有多个“主题”。我有几个div可以根据单选按钮的选择更改其背景颜色（无论是否启用）。通过使用javascript动态更改div的css类，我可以很好地做到这一点

但是，这些主题可能会发生变化，并且在创建页面时会从数据库中获取背景颜色。现在，我在C#codebehind中这样做：

string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);

在Javascript中，我需要更改此颜色以使其看起来被禁用，当用户单击返回此div时，我需要通过将其更改回其原始颜色来重新启用它。但是因为我只知道代码背后的颜色，所以我不知道Javascript中的颜色是什么

所以我的想法是，当页面加载了我需要的背景颜色时，在生成的HTML页面中创建一个css类。然后我可以简单地从javascript中的divEnabled和divDisabled类切换。但我不确定该怎么做

---

或者，我可以创建一个隐藏元素，将其指定为“enabled”样式，并在启用div时将其用作JavaScript中的引用。这看起来像是一种攻击，但可能是最简单的方法。我对很多这方面还不熟悉，所以如果有任何建议，我将不胜感激。谢谢你的意见

您可以使用jquery.toggleClass方法

描述：根据类的存在或开关参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类

这里是api文档的链接。

所以我的想法是，当页面加载了我需要的背景颜色时，在生成的HTML页面中创建一个css类。然后我可以简单地从javascript中的divEnabled和divDisabled类切换。但我不确定该怎么做

是的，这是安塞尔；这样做。在文档的

中添加一个

，然后像这样将CSS放入其中：（我的Asp.NET有点生锈，请原谅我，如果它有一些问题；）

您还可以将其放入外部CSS文件中，这可能是一个好主意

然后编写一些JavaScript来添加/删除class属性（我要问你；）

var-ownersearchheader=document.getElementById（“”）；
//将class属性更改为'divDisabled'`
var newClassAttribute=ownersearchheader.getAttribute（“类”）.replace（/\bdivEnabled\b/，“divDisabled”）
ownersearchheader.setAttribute（“类”，newClassAttribute）；
// ... 或
//将class属性更改为'divEnabled'`
var newClassAttribute=ownersearchheader.getAttribute（“类”）.replace（/\bdivDisabled\b/，“divEnabled”）
ownersearchheader.setAttribute（“类”，newClassAttribute）；

---

这确实是一个满嘴的问题，因此，正如@Haydar所说，您可能希望使用jQuery，它提供了简单的方法，如pie

addClass（）

、

removeClass（）

和

toggleClass（）

方法。

感谢您的回复。谢天谢地，我已经编写了javascript来交换类，所以这不是问题。首先，我更关心的是基于主题创建css。我确实有一个单独的.css文件，但我不能修改它，因为它在站点范围内使用，并且这个页面的每个实例都有不同的主题，因此背景颜色也不同。我不认为我可以在css文件中使用绑定…如果您将css文件更改为

.aspx

文件，您可以像在css文件中那样绑定。。。但那可能太过分了。是的，Richard，据我所知，这是你必须做的。实际上，您不能在css定义中使用代码块。

<style>
    <!--
    .divEnabled {
        background-color:<%=theme.searchTextHeaderColor%>;
    }
    .divDisabled {
        background-color:gray; /* or wtv */
    }
    -->
</style>

var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);