回发后 CSS 颜色在 Javascript 中不起作用答案

【问题标题】：CSS Colours not working from Javascript after postback回发后 CSS 颜色在 Javascript 中不起作用
【发布时间】：2013-02-25 14:54:14
【问题描述】：

我有一个 Web 应用程序，我正在其中进行一些客户端验证。这是通过添加到每个 Asp:TextBox

onkeyup="javascript: value_change(this);"

一旦达到价值变化，我就有了这个 Javascript...

function value_change (text_box) {
    // validate code here
    if (valid) {
        text_box.className = "normalInput";
        document.getElementById("GoButton").disabled = false;
    }
    else {
        text_box.className = "errorInput";
        document.getElementById("GoButton").disabled = true;
    }
}

className 对应于 CSS 类，其显着部分如下所示：-

.normalInput
{
    background-color: #ffffff;
}
.errorInput
{
    background-color: #ff0000;
}

当页面最初显示时，这工作得很好，但在第一次回发之后，虽然调用了函数，设置了类名和 GoButton 灵敏度（我已经通过调试单步执行了这一点），背景颜色不会改变。

有谁知道这是为什么以及我应该怎么做？

编辑听从@Pete 的建议，我在新的类名被分配给它后立即检查了 text_box，并且似乎 currentStyle 属性保持不变。 currentStyle 的特性与 normalInput 类相同；我调整了它们并重新运行它来检查。所以我推断分配被忽略了，而不是不同的 CSS 以某种方式工作。

【问题讨论】：

一个活生生的例子可以很好地调试这个。
你在使用更新面板吗？
@Pete，不，页面中没有更新面板。
@t_virus，抱歉我帮不上忙；此应用程序仅供内部使用。
您是否在后面的代码中添加了 onkeyup 属性，如果 !page.ispostback 也我认为您不需要包含 javascipt：

标签： javascript asp.net css

【解决方案1】：

在客户端更改的样式不会发送回服务器。您必须自己在服务器上设置属性才能持久保存它们。服务器根据服务器上可用的属性集构建控件定义，并重新呈现原始值。这是因为只有文本框的值回传到服务器；其他的都没有。

话虽如此，您可以解释启用或禁用按钮的条件，设置适当的 CSS 样式，并在服务器上设置这些属性，或在文档加载时重新应用样式。

【讨论】：

感谢您的回答。但问题不在于颜色变化消失了。问题是，在第一次回发之前，通过上面显示的 Javascript 向文本框中输入无效数据会导致背景颜色发生变化。第一次回发后，输入无效数据会导致 Javascript 运行但不会更改背景颜色。
在客户端解决方案回发后禁用最好使用Attributes("disabled") 中的属性集合。在 .NET 控件上设置 Enabled="false" 的行为大不相同。

【解决方案2】：

经过多次发誓，我终于得到了验证，可以在回发后更改背景颜色，如下所示：-

function value_change (text_box) {
    // validate code here
    if (valid) {
        text_box.className = "normalInput";
        document.getElementById(text_box.name).style.backgroundColor = "#ffffff";
        document.getElementById("GoButton").disabled = false;
    }
    else {
        text_box.className = "errorInput";
        document.getElementById(text_box.name).style.backgroundColor = "#ff0000";
        document.getElementById("GoButton").disabled = true;
    }
}

即手动设置。我不太喜欢这个，因为它正在推动一个四人小组完成 CSS 课程的全部目的。如果有人能想出更好的东西，我会全力以赴。

【讨论】：