在使用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元素的樣式？

回答

相關問題