在代码隐藏中动态创建 CSS 类答案

【问题标题】：create css class on the fly in codebehind在代码隐藏中动态创建 CSS 类
【发布时间】：2011-03-25 06:59:30
【问题描述】：

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

但是，这些主题可能会发生变化，并且在创建页面时会从数据库中获取背景颜色。现在我在 C# 代码隐藏中执行此操作：

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

在 Javascript 中，我需要更改此颜色以使其看起来被禁用，并且当用户单击返回此 div 时，我需要通过将其更改回其原始颜色来重新启用它。但是由于我只在代码隐藏中知道这种颜色，所以我不知道它在 Javascript 中是什么。

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

或者，我可以创建一个隐藏元素，为其分配“启用”样式，并在启用我的 div 时将其用作 JavaScript 中的引用。这似乎是一种 hack，但可能是最简单的方法。我对很多东西还是陌生的，所以我会很感激任何建议。感谢您的意见！

【问题讨论】：

标签： javascript asp.net css asp.net-3.5

【解决方案1】：

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

是的，这是分析器；做这个。在您文档的<head> 中添加<style> 并将您的CSS 放在那里，如下所示：（我的Asp.NET 有点生锈，如果它有一些问题请见谅；）

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

您也可以将它放在外部 CSS 文件中，这可能是个好主意。

然后编写一些JavaScript来添加/删除类属性（我要问你don't call is the "CSS Class";））

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

这确实是满口的，所以，就像@Haydar 所说，您可能想要使用 jQuery，它提供了简单易用的 addClass()、removeClass() 和 toggleClass() 方法。

【讨论】：

感谢您的回复。幸运的是，我已经编写了用于交换类的 javascript，所以这不是问题。我更关心首先基于主题创建 css。我确实有一个单独的 .css 文件，但我无法修改它，因为它在站点范围内使用，并且此页面的每个实例都将具有不同的主题，因此具有不同的背景颜色。我认为我不能在 css 文件中使用进行绑定...
如果您将 CSS 文件更改为 .aspx 文件，您可以像这样在 CSS 文件中绑定...但这可能有点过头了。
是的，理查德，据我所知，这是你必须做的。您实际上不能在 css 定义中使用代码块。

【解决方案2】：

您可以使用 jquery .toggleClass 方法。

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

这里是 api 文档的链接。 Jquery API

【讨论】：