javascript 使用Javascript更改HTML元素后如何刷新它的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29694361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How refresh the style of an HTML element after changing it using Javascript?
提问by Wasabe
I have an HTML page containing XML. Using Javascript, the XML attributes can be changed when the user clicks a button. (So far, everything works)
我有一个包含 XML 的 HTML 页面。使用 Javascript，可以在用户单击按钮时更改 XML 属性。（到目前为止，一切正常）
However, the attribute that is changed is used in the linked CSS to determine the background color of the element. When the attribute value is changed, the style is not refreshed, so the color doesn't change.
但是，更改的属性在链接的 CSS 中用于确定元素的背景颜色。当属性值改变时，样式不会刷新，所以颜色不会改变。
I can alter the javascript to also change the color, but that would involve hardcoding the color, and partially defeat the point of using CSS.
我可以更改 javascript 以更改颜色，但这将涉及对颜色进行硬编码，并且部分地破坏了使用 CSS 的意义。
So, it seems to me, I need to do one of two things, and I can't figure out how to do either:
所以，在我看来，我需要做两件事之一，但我不知道该怎么做：
- read the color from the CSS, and then assign it using javascript
- somehow use javascript to have the CSS re-applied to the document.
- 从 CSS 中读取颜色，然后使用 javascript 分配它
- 以某种方式使用 javascript 将 CSS 重新应用于文档。
Which approach is better? I assume the 2nd is easier, unless there is a side-effect I haven't thought of. And, whichever approach is better, HOW TO DO IT?
哪种方法更好？我认为第二个更容易，除非有我没有想到的副作用。而且，无论哪种方法更好，如何做？
My CSS contains:
我的 CSS 包含：
*[cleared=true] {
background:lightgrey;
}
My XML looks like this:
我的 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>
My Javascript is:
我的Javascript是：
function Reconcile(Element_ID){
try {
var c=document.getElementById(Element_ID);
c.setAttribute('Cleared','True');
}
catch(e) {
alert(e.description);
}
}
I have tried changing the script from modifying 'Cleared' to 'Date', and I can see the date change. The 'Cleared' attribute is not displayed directly by the CSS, but is used to set the formatting of other elements and/or attributes.
我尝试将脚本从修改“已清除”更改为“日期”，我可以看到日期更改。'Cleared' 属性不直接由 CSS 显示，而是用于设置其他元素和/或属性的格式。
Changing the value of 'Cleared' before the page is loaded has the effect I expect - the CSS causes the formatting I expect. However, after the page is loaded, when the javascript changes the value of 'Cleared', no visible change in formatting takes place.
在页面加载之前更改 'Cleared' 的值具有我期望的效果 - CSS 会导致我期望的格式。但是，在页面加载后，当 javascript 更改 'Cleared' 的值时，格式不会发生明显变化。
采纳答案by Ciprian
Did you try to assign classes?
你有没有尝试分配课程？
Either with pure Javascript:
要么使用纯 Javascript：
document.getElementById('selector').className = 'active';
document.getElementById('selector').className = 'active';
or with jQuery:
或使用 jQuery：
jQuery('#selector').addClass('active');
jQuery('#selector').addClass('active');
This way you can use CSS classes and not hardcode the colour in your Javascript code.
通过这种方式，您可以使用 CSS 类，而不是在 Javascript 代码中硬编码颜色。
See implementation of addClass and removeClass in Javascript: http://jaketrent.com/post/addremove-classes-raw-javascript/
请参阅 JavaScript 中 addClass 和 removeClass 的实现：http: //jaketrent.com/post/addremove-classes-raw-javascript/
回答by Dashovsky
There's some info about changing style of HTML element with jQuery: jQuery changing style of HTML element
有一些关于使用jQuery 更改 HTML 元素样式的信息：jQuery 更改 HTML 元素的样式
There's some more if you change your mind: How to modify STYLE attribute of element with known ID using JQuery
如果您改变主意，还有更多内容：如何使用 JQuery 修改具有已知 ID 的元素的 STYLE 属性
You can either add some extra styles or just switch the target class/id.
您可以添加一些额外的样式或只是切换目标类/ID。
