Question

我的搜索页面在我的网站中有多个“主题”的多个地方使用。我有几个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中的引用。这似乎是一个黑客，但也许是最简单的方法。我还是很多新手，所以我很感激任何建议。感谢您的投入！

Answer 1

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

是的，这是anser;做这个。在你的文档的<head>中添加一个<style>并将你的CSS放在那里:(我的Asp.NET有点生疏，所以请原谅我，如果它有一些hicups;）

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

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

然后写一些JavaScript来添加/删除class属性（我要问你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()方法。 / p>

Answer 2

您可以使用jquery .toggleClass方法。

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

这是api doc的链接。 Jquery API

在后面的代码中动态创建css类

2 个答案: