如何使用Javascript重新定義CSS類

Question

假設我們已經定義了一個正在應用於頁面上各種元素的CSS類。

colourful 
{ 
    color: #DD00DD; 
    background-color: #330033; 
} 

人們抱怨的顏色，他們不喜歡粉紅色/紫色。所以你想給他們改變風格的能力，他們可以選擇自己喜歡的顏色。你有一點點的顏色選擇器插件調用Javascript函數：

function changeColourful(colorRGB, backgroundColorRGB) 
{ 
    // answer goes here 
} 

什麼在函數體中去？

這樣做的目的是，當用戶在顏色選擇器上選擇一種新顏色時，class="colourful"的所有元素都將改變其樣式。

Answer 1

我不知道如何操作類direc但是你可以有效地做同樣的事情。這裏是jQuery中的一個例子。

$('.colourful').css('background-color', 'purple').css('color','red'); 

在普通的javascript中，您將不得不做更多的工作。

Answer 2

喜歡的東西

function changeColourful(colorRGB, backgroundColorRGB) 
{changeColor (document, colorRGB, backgroundColorRGB)} 

function changeColor (node, color, changeToColor) 
{ 
    for(var ii = 0 ; ii < node.childNodes.length; ii++) 
    { 
    if(node.childNodes[ii].childNodes.length > 0) 
    { 
     changeColor(node.childNodes[ii], color, changeToColor); 
    } 

     if(node[ii].style.backgroundColor == color) 
     { 
     node[ii].style.backgroundColor = changeToColor; 
     } 

    } 


} 

Answer 3

我真的實現這個服務器端;只是存儲在他們的會話的用戶的首選顏色（通過cookie或什麼是好的，容易讓你）和動態生成CSS，即

colourful { 
    color: ${userPrefs.colourfulColour}; 
    background-color: ${userPrefs.colourfulBackgroundColour}; 
} 

如果它真的適合你更好的通過JavaScript要做到這一點，你可以使用Javascript來操縱CSS。見，例如：

• Microsoft's Documentation
• https://developer.mozilla.org/en/DOM/style

Answer 4

首先檢查是否document.styleSheets定義（見@亞歷克斯的響應）。

如果不是，這個問題應該是有幫助的：
Get All Elements in an HTML document with a specific CSS Class

見接受的答案和鏈接我的底部響應。

這只是答案的一部分。您仍然必須使用每個元素的樣式屬性應用新值。

Answer 5

特定DIV /顏色簡單的例子 - 它可以通過一個函數動態地傳遞

 
document.getElementById('Your Div Name Here').style.background = 'white'; 

或者更改類指定項目

 
document.getElementById('Your Div Name Here').classname = 'newclassname' 

的這是假設你可以以這種方式指定div，如果沒有，這個和節點循環解決方案的組合凱文顯示應該做竅門

Answer 6

var setStyleRule = function(selector, rule) { 
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)]; 
    if(stylesheet.addRule) { 
     stylesheet.addRule(selector, rule) 
    } else if(stylesheet.insertRule) { 
     stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
    } 
}; 

Answer 7

的jQuery：

function changeColourful(colorRGB, backgroundColorRGB) 
{ 
    $('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB}); 
} 

如果你想改變跨頁堅持你就必須將它們存儲在cookie中，每一次重新應用功能。

Answer 8

我只是用一個空<風格>在<頭標記>，然後動態填充它試圖。似乎至少在ff3工作。

所以：

在<頭>，插入類似：

<style id="customstyle" type="text/css"></style> 

現在你可以使用像jQuery來更換或添加的內容：

更換：

$("#customstyle").text(".colourful { color: #345 ; }"); 

追加：

$("#customstyle").append(".colourful { color: #345 ; }"); 

如果你想保存在某個地方，只是搶內容：

var csscontent = $("#customstyle").text(); 

..然後你可以發送回服務器通過Ajax。

Answer 9

這是將背景圖像更改爲樣式表的完整示例。 第一部分找到正確的樣式表。在這裏，我想要最後一個，其href包含「mycss.css」。您也可以使用title屬性。

第二部分找到正確的規則。在這裏，我把一個標記「MYCSSRULE」，所以我可以找到正確的規則。

在mycss.css CSS的規則是：#map TD，MYCSSRULE {背景圖像：URL（ 「img1.png」）; }

第三部分只是改變了規則。

此過程不與Internet Explorer 6.工作（IE 8是確定）。適用於Firefox 3和Webkit。

希望它有幫助。

function changeBgImg(newimage) { 
    var i,n; 
    var ssheets = document.styleSheets;   // all styleSheets. Find the right one 
    var ssheet; 

    // find the last one whose href contain "myhref" 
    n = ssheets.length; 
    for (i=n-1; i>=0 ;i--) { 
    var thisheet = ssheets[i]; 
    if ((null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1)) { 
     ssheet = thisheet; break; 
    } 
    } 

    if ((null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) { 
    // stylesheet not found or internet explorer 6 
    return; 
    } 

    // find the right rule 
    var rule; 
    n = ssheet.cssRules.length; 
    for (i=0; i<n; i++) { 
    var r = ssheet.cssRules.item(i); 
    if (typeof(r.selectorText) == "undefined") { continue; } 
    if (r.selectorText.indexOf("MYCSSRULE") != -1) { 
     rule = r; break; 
    } 
    } 

    if (null == rule) { 
    // not found 
    return; 
    } 

    rule.style.backgroundImage = "url(" + newImage + ")"; 
}