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更改“已清除”的值时，格式化不会发生任何可见的更改。

Answer 1

您是否尝试过分类？

使用纯Javascript：

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

或使用jQuery：

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

通过这种方式，您可以使用CSS类，而不是在Javascript代码中对颜色进行硬编码。

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

Answer 2

有一些关于使用jQuery更改HTML元素样式的信息：jQuery changing style of HTML element

如果你改变主意还有更多想法：How to modify STYLE attribute of element with known ID using JQuery

您可以添加一些额外的样式，也可以只切换目标类/ ID。

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

2 个答案: