使用JavaScript修改與給定CSS類關聯的CSS屬性

我有一個JavaScript顏色選擇器鏈接到文本輸入。我想在我的幾個彩色元素上更改顏色輸入更新的顏色。我可以創建幾個類，每種顏色（藍色，紅色，綠色等），但我想有整個24位coloe調色板，不只是其中的一些。是否可以修改與給定CSS類關聯的屬性的值？如果是，那麼修改這些值是否會在渲染頁面上實時應用新值？在此先感謝:)使用JavaScript修改與給定CSS類關聯的CSS屬性

來源

2013-03-30 Virus721

是jQuery的一個選項，因爲這會是最簡單的方法嗎？ –

是的，我使用jQuery，flemingstone的答案解決了我的問題。 – Virus721

好的。下一次，在標籤中指定。 –

完全可能的，是的，它會實時更新。

這是一個函數來做類屬性更新，綁定到一個mouseover事件（需要jQuery 1.0 +）。鼠標懸停在DIV id爲myDiv將與類myColorDivs更新CSS背景顏色爲白色的所有div的：

$('#myDiv').mouseover(function() { 

    $('.myColorDivs').css('background', '#fff'); 

});

來源

2013-03-30 14:10:32 flemingslone

請注意，修改類的CSS規則和直接使用類修改元素是有區別的。例如，如果添加了該類的新元素，則不會受到更改的影響。 – Pointy

完全正確。我只是在我的示例中修改頁面中已存在的元素，而不是修改實際的類本身。 – flemingslone

謝謝你的回答！這不完全是我想要做的，但它會做到這一點。如果我需要添加一個元素，我仍然可以對其進行預編譯或重新執行該樣式更新，即使它在性能方面也不是很乾淨。 – Virus721

對不起，我來晚了...... 前幾天有同樣的問題，並沒有發現一個實際的答案。下面是我如何解決它（需要jQuery）：

在所有其他樣式表添加一個內聯樣式表後，您的頁面可能需要與您想要更改的類。爲此樣式表分配一個TITLE屬性！

<style title="tomrulez" type="text/css"> 
/*the stylesheet to change - Note the TITLE*/ 
.shaded{ 
    color:green; 
} 
</style>

添加此功能：

function modCSS (stylesheet, rule, attrib, newval){ 
    $.each(document.styleSheets, function(skey, svalue) { 
     if(svalue.title==stylesheet){ 
      $.each(svalue.cssRules,function (rkey,rvalue){ 
       if (rvalue.selectorText==rule){ 
        rvalue.style[attrib]=newval; 
       } 
      }); 
     } 
    }); 
    }

調用它像這樣：

<div onclick="modCSS('tomrulez','.shaded','color','red')"> click here</div>

的參數是：

樣式 - >的最後一個樣式表的TITLE在你的
規則 - >你想改變的CSS規則
ATTRIB - >你想改變
的newval規則的屬性 - 你要分配給>的新值那個屬性

我已經用Firefox，Chrome和IE10測試過了。 IE可能無法在舊版本中使用。但我主要開發後端的一小部分用戶，如果我告訴他們不使用IE瀏覽器（是的，我很幸運！）

Btw。這裏是一個適合我的Plunker：http://plnkr.co/edit/EMDpjU06U2p83Df8Lolq?p=preview

來源

2013-09-26 14:05:38 mainguy

使用JavaScript修改與給定CSS類關聯的CSS屬性

回答

相關問題