更改网页背景颜色 jQuery

Question

我正在尝试制作一个供老年人使用的网站，因此我提供了一些选项，以便他们可以更改页面上的背景颜色和字体颜色。例如黑底白字和白底黑字

我已经成功实施 jQuery 来做到这一点。然而，当我点击其中一个选项时，例如，白底黑字，然后我想点击黑底白字选项……它们都适用。页面不会重新启动以仅应用其中之一，它们重叠并且应用两种颜色选项。我不确定如何解决这个问题，所以我想知道是否有人可以帮助我。

HTML:

<a href="#" id="Col">Col</a>
<a href="#" id="Color">Color</a>

JS:

$(document).on('click', '#Col', function(){
    $('#wrap, .headerphone, nav, .slider, .intro, .wrap, .services, .column, p,      h1, h2, h3, h4, ul li, ol, li, .clearfix, .highlight, a, footer, .footer-  distributed, .footer-links').css({'background-color' : '#000000', 'color' :   '#FFFFFF'});
});

$(document).on('click', '#Color', function(){
    $('p, h1, h2, h3, h4, ul, li, ol, .highlight, a, span, .footer-links,   .headerphone').css({'color' : '#000000'});
});

Answer 1

您在第一个中更改了background-color，但在第二个中您只改回了color。
您在第二个选择器中使用了不同的选择器。如果你想把所有的东西改回来，你应该有相同的选择器。

注意：我建议使用 addClass 和 removeClass 而不是 css 函数。这样你就可以 add/remove 一个 class 只到 body，并达到同样的效果。

更改网页背景颜色 jQuery

change background color on webpage jQuery

html

javascript

jquery

accessibility