根據容器上的類切換主體顏色

我們使用1個包含標籤的index.html頁面，在CSS中將主體設置爲背景顏色#ddd。 index.html頁面是包含所有其他頁面的主要模板。所以我不能在body上指定多個背景顏色，因爲它只使用1個索引頁面。根據容器上的類切換主體顏色

被納入的index.html頁，例如其餘：services.html將開始：

<div class="container">services content here</div>

是否有可能與CSS以某種方式在容器上添加一個類來切換身體上的背景顏色？例如：

<div class="container bgWhite">services content here</div> 
<div class="container bgDKGrey">contact content here</div> 
<div class="container bgBlue">reviews content here</div>

然後做這樣的事情：

body .container.bgWhite body {background:white;}

林不知道究竟是如何做到這一點？

編輯：

這會不會像有人工作在這裏發佈：

$('.container').hasClass('bgWhite') { 
    $('body').css('backround', 'white'); 
}

我怎麼會多背景顏色做到這一點，雖然，如果我想在身體上多個背景顏色之間進行切換？

來源

2014-10-29 John

不可能只用css – Hacketo 2014-10-29 10:13:56

你怎麼知道要添加哪個顏色類？相對於頁面的類型（url地址）還是其他方式？ – webkit 2014-10-29 10:26:02

什麼時候你會「切換」？ – KyleK 2014-10-29 10:56:13

您可以嘗試使用jQuery，一些類似的東西：

if ($(".container").hasClass("bgBlue")){ 
    $("body").css('background', 'blue'); 
};

這裏是一個小提琴：http://jsfiddle.net/tcjagypy/

來源

2014-10-29 10:37:49

謝謝，如果我想要檢測並使用多個背景顏色（取決於類名 – John 2014-10-29 10:41:48

@John here：http://jsfiddle.net/tcjagypy/2/），我會如何設置它。你可以理解代碼？如果你需要更多的顏色，只需創建其他顏色，如果 – 2014-10-29 10:54:16

幾乎配對，你會如何添加超過x4的顏色？也有可能使用十六進制代碼而不是紅色，藍色等？ – John 2014-10-29 10:56:18

可以更改使用jQuery的元素的背景上的任何事件：

$('button.bgWhite').click(function() { 
    $('.container').css('background', 'white'); 
});

這與例如按鈕：

<button class="bgWhite">Set .container background to white</button>

來源

2014-10-29 10:32:58 KyleK

首先是什麼改變車身顏色的條件是什麼？

反正你將需要使用JavaScript HTML DOM Style Object做到這一點：

document.getElementById("myH1").style.color = "red";

你可以take a look here。

來源

2014-10-29 10:33:06

僅使用「CSS」是不可能的。使用「Javascript」和「CSS」我們可以實現這一點。

來源

2014-10-29 10:36:09 Swati

演示= http://jsfiddle.net/victor_007/q56sk9m9/1/

的Html

<div class="container blue">test</div>

jQuery的

var color = $('.container').css('background-color'); 
$('body').css('background-color', color)

來源

2014-10-29 10:40:43

根據容器上的類切換主體顏色

回答

相關問題