Question

我必须更改网站中整个元素的颜色和背景。我这样做：

var color_text = ["initial","#00FF21","#fff"];
var color_background = ["initial","#f00","#000"];
var ile = 1;

$('.kontrast').click(function () {
  $('#main').css("color", color_text[ile]);
  $('#main').css("background", color_background[ile]);
  $('a#main').css("color", color_text[ile]);
  ile = (ile+1) % 3;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="kontrast" href="#">Contrast</a>


<div id="main">
  <h3>A little bit of text </h3>
  <p>z A little bit of text .</p>
  <p><strong>A little bit of text</strong></p>
  <p>A little bit of text</p>
  <p><a href="#">Download .pdf</a></p>
</div>

在这种情况下，我无法为元素更改它。它也不适用于我的网站中的h3元素。如何完全覆盖所有元素？我试过这样做

$('a#main').css("color", color_text[ile]);

但它不起作用

Answer 1

您可以将jquery选择器更改为“main *”

var color_text = ["initial","#00FF21","#fff"];
var color_background = ["initial","#f00","#000"];
var ile = 1;

$('.kontrast').click(function () {

  $('#main *').css("color", color_text[ile]);
  $('#main *').css("background", color_background[ile]);
  $('a#main').css("color", color_text[ile]);
  ile = (ile+1) % 3;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a class="kontrast" href="#">Contrast</a>


<div id="main">
  <h3>A little bit of text </h3>
  <p>z A little bit of text .</p>
  <p><strong>A little bit of text</strong></p>
  <p>A little bit of text</p>
  <p><a href="#">Download .pdf</a></p>
</div>

Answer 2

如果你改变：

$('#main').css("background", color_background[ile]);

到此：

$('body').css("background", color_background[ile]);

它会起作用。

用css覆盖颜色和背景

2 个答案: