Question

我的网站是：http://test.highfieldscentre.ac.uk/wordpress/

我尝试为其添加辅助功能，使访问者可以点击按钮以打开＆＃34;打开＆＃34;并且＆＃34;关闭＆＃34;高对比度模式（即带有黄色文本的黑色背景）。我有这个的CSS，但我不知道如何制作它可以打开和关闭。

非常感谢任何帮助！

Answer 1

更好的方法可能是使用jQuery的.toggleClass()函数将类附加到body，如下例所示：

这里我们有一个元素，点击即可打开和关闭contrast类。从那里你可以根据需要修改你的CSS，以提供标准/高对比度选项。

必要的jQuery的一个例子是在小提琴及以下：

$(function() {
    $(".toggleContrast").click(function() {
       $('body').toggleClass('contrast');
  })
});

Answer 2

您可以将jQuery中的JQuery Click function用于add a class或remove a class.

Answer 3

最好只有一个CSS文件，以达到更好的性能。你可以简单地在body上添加一个类，比如“对比”，并在类在这里时为页面中的元素定义一些特定的大小写。

然后你可以用JS切换类。

var contrastSwitcher = document.querySelector('.contrast-switch'),
	body = document.querySelector('body');

contrastSwitcher.addEventListener('click', function(event) {
  if (localStorage.getItem('contrast') !== null) {
  	localStorage.removeItem('contrast');
    body.classList.remove('contrast');
  }
  else {
    localStorage.setItem('contrast', true);
    body.classList.add('contrast');
  }
});

.btn {
  background: #5d90c4;
  color: #fff;
  border: 0;
  padding: .6em 2em;
  font-size: 1.25em;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  outline: 0;
}

.contrast .btn {
  background: #222;
  text-shadow: none;
}

<button class="btn contrast-switch">Click me !</button>

这样，使用localStorage，它会记住用户设置。

Answer 4

如上所述，这是使用jQuery完成的。

在一个非常简单的基础层面上，互联网由三种“语言”组成 - HTML，CSS和JavaScript（我将在短时间内获得jQuery！）。

这三者都对网页有特殊目的。想象一下，你正在建房子：

HTML 将是基本的构建块，基本上是墙和屋顶。 HTML是网站的结构。
CSS 将是房子的颜色，也许是使用的材料，
所有“设计”的东西。 CSS就是网站的外观。
JavaScript 将是房子里的所有布线和管道当你按下开关时，告诉灯泡打开的东西。 JavaScript是网站的功能和互动性。

纯粹的JavaScript有时很难处理，需要大量代码来完成简单的任务。 jQuery是发明的，你可以（引用他们的口号）少写，多做。它基本上是许多预先编写的JavaScript函数，您可以将它们导入到您的站点然后使用。

我建议在Codecademy查看jQuery课程，它是免费的，简短的，有效的，并且会让你快速前进，但最重要的是让你了解如何解决这个问题而不是其他许多问题来吧！ :)

如何在按钮点击时激活/停用CSS？

4 个答案: