javascript - 用 css 覆盖颜色和背景

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>