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

我有一个包含XML的HTML页面。使用Javascript，可以在用户点击按钮时更改XML属性。（到目前为止，一切正常）在使用Javascript更改HTML元素后，如何刷新HTML元素的样式？

但是，被链接的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'的脚本更改为'Date'，并且我可以看到日期更改。 '清除'属性不直接由CSS显示，但用于设置其他元素和/或属性的格式。

在加载页面之前更改'清除'的值具有我期望的效果 - CSS会导致我期望的格式。但是，在页面加载后，当javascript更改'清除'的值时，格式化中不会发生可见的更改。

来源

2015-04-17 Wasabe

你能在这里分享一些代码，你使用的是什么属性，你怎么改变它。 –

你确定属性值肯定正在更新吗？正如Franky所说，请提供您的代码。 – Shaggy

难道问题出在XML和区分大小写（以及CSS中的小写选择器）吗？ – Shikkediel

您是否尝试分配类？

要么用纯的Javascript：

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

或用jQuery：

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

这样你就可以使用CSS类，而不是硬编码你的Javascript代码中的颜色。

看到Javascript实现addClass与removeClass的： http://jaketrent.com/post/addremove-classes-raw-javascript/

来源

2015-04-17 08:58:19 Ciprian

我现在有它的工作。原来是几个不同的问题。我没有在我的CSS中使用类名，所以最初并没有看到如何应用这个想法。另外，我的XML包含在一个元素中，但它是具有ID属性的XML，并且它是需要由CSS更改的TD元素。 – Wasabe

太棒了！我很高兴你明白了。 – Ciprian

-2

有关于更改HTML元素的风格，jQuery的一些信息：jQuery changing style of HTML element

，如果你改变你的想法有一些更多：How to modify STYLE attribute of element with known ID using JQuery

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

来源

2015-04-17 08:47:52 Dashovsky

最初的问题没有提到jQuery。 – Shaggy

jQuery是JavaScript库，它就像使用现有的东西来更快地达到预期的效果，对于混淆抱歉 – Dashovsky

我知道jQuery是什么，我只是指出在问题中没有提及它。 – Shaggy

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

回答

相关问题