javascript - 如何以编程方式启用 "-ms-high-contrast"媒体查询？

Question

我想在我的网站上启用高对比度模式，并将所有与可访问性相关的规则放在高对比度媒体查询中:

@media screen and (-ms-high-contrast: active) {
  /* All high contrast styling rules */
}

但是，如何以编程方式在 JavaScript 中启用这种模式？我想为我的用户提供一个按钮，让他们根据自己的意愿切换此功能。有没有可能？我做对了吗？也许存在更好的解决方案。

谢谢您的帮助。

Answer 1

由于媒体查询是自动的(基于浏览器条件)，您需要在 CSS 中模拟该 block ，但根据用户交互应用和删除它。

在我看来，您应该简单地编写样式来模拟 IE 的高对比度模式，然后在单击按钮时在文档(可能是正文)上切换一个类。

将新的类和子定义放在 CSS 的底部，这样您就知道它们会覆盖以前的属性。

例如:

h2 {
  font-size: 14px;
  color: #dddddd;
}
/* overrides a normal h2 when highContrast class is added to the body */
/* use a post processor (LESS/SCSS) to easily nest elements */
body.highContrast h2 {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}