Question

我们正在使用包含标记的1个index.html页面，在css中，正文设置为背景颜色#ddd。 index.html页面是包含所有其他页面的主模板。因此我不能在主体上指定多种背景颜色，因为它只使用了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');
 }

如果我想在身体上的多种背景颜色之间切换，我如何为多种背景颜色做这个？

Answer 1

你可以尝试使用Jquery，类似的东西：

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

这是一个小提琴：http://jsfiddle.net/tcjagypy/

Answer 2

demo = 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)

Answer 3

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

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

这是一个按钮，例如：

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

Answer 4

首先改变体色的条件是什么？

无论如何，你需要使用Javascript来使用HTML DOM Style Object：

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

你可以take a look here。

Answer 5

仅使用＆＃34; CSS＆＃34;是不可能的。使用＆＃34; Javascript＆＃34;和＆＃34; CSS＆＃34;我们可以做到这一点。

根据容器上的类切换主体颜色

5 个答案: