javascript - 使用 Javascript 更改 HTML 元素后如何刷新它的样式？

Question

我有一个包含 XML 的 HTML 页面。使用 Javascript，可以在用户单击按钮时更改 XML 属性。 (到目前为止，一切正常)

但是，更改的属性在链接的 CSS 中用于确定元素的背景颜色。当属性值改变时，样式不会刷新，所以颜色不会改变。

我可以改变 javascript 来改变颜色，但这将涉及对颜色进行硬编码，并且部分地破坏了使用 CSS 的意义。

所以，在我看来，我需要做两件事中的一件，但我不知道该怎么做:

• 从 CSS 中读取颜色，然后使用 javascript 分配它
• 以某种方式使用 javascript 将 CSS 重新应用于文档。

哪种方法更好？我认为第二个更容易，除非有我没有想到的副作用。而且，无论哪种方法更好，如何操作？

我的 CSS 包含:

*[cleared=true] {
background:lightgrey;
}

我的 XML 看起来像这样:

<Transfer ID="31266" Date="2015-04-14" Cleared="false">
    <AccountCharge Account="Unplus">-826.20</AccountCharge>
    <AccountCharge Account="Amex">826.20</AccountCharge>
    <TransactionID>1504140662984782</TransactionID>
</Transfer>

我的 Javascript 是:

function Reconcile(Element_ID){
try {
    var c=document.getElementById(Element_ID);
    c.setAttribute('Cleared','True');
    }
catch(e) {
    alert(e.description);
    }
}

我已尝试将脚本从修改“已清除”更改为“日期”，我可以看到日期发生了变化。 'Cleared' 属性不直接由 CSS 显示，而是用于设置其他元素和/或属性的格式。

在加载页面之前更改“已清除”的值具有我预期的效果 - CSS 会导致我预期的格式设置。但是，在加载页面后，当 javascript 更改“Cleared”的值时，格式没有发生明显的变化。

Answer 1

您是否尝试过分配类(class)？

要么使用纯 Javascript:

document.getElementById('selector').className = 'active';

或使用 jQuery:

jQuery('#selector').addClass('active');

这样您就可以使用 CSS 类，而不必在 Javascript 代码中对颜色进行硬编码。

---

查看 addClass 和 removeClass 在 Javascript 中的实现: http://jaketrent.com/post/addremove-classes-raw-javascript/