Javascript 如何以编程方式启用-ms高对比度“；媒体查询？

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

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

但是，如何以编程方式在JavaScript中启用这种模式？我希望有一个按钮，让我的用户根据自己的意愿切换此功能。有可能吗？我做得对吗？也许有更好的解决办法

---

感谢您的帮助。

这里有一种技巧，非常简单：使用-ms高对比度创建媒体查询，在其中放置IE 10和11特定的CSS样式。由于-ms高对比度是特定于Microsoft的（并且仅在IE 10+中可用），因此只能在Internet Explorer 10及更高版本中对其进行解析

-ms高对比度支持两个值：无和活动。因此，要以IE10+为目标，而不考虑属性的设置，请使用以下媒体查询：

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

@介质全部和（-ms高对比度：无），（-ms高对比度：激活）{
/*IE10+CSS样式放在这里*/

定义要为ms高对比度模式添加的类

一旦用户单击该按钮，您就必须动态地将相关类添加到dom元素中

---

注意：这只适用于IE10+浏览器。

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

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

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

例如：

h2{
字体大小：14px；
颜色：#dddddd；
}
/*将高对比度类添加到主体时覆盖普通h2*/
/*使用后处理器（LESS/SCS）轻松嵌套元素*/
体高对比度h2{
字号：18px；
颜色：#000；
字体大小：粗体；
}

正如@GrahamRitchie所指出的，虽然不能通过JavaScript启用浏览器的高对比度设置，但通常可以检测它是否已经启用

对于Windows 10上的大多数浏览器，您可以通过以下方式检测是否启用了高对比度：

创建具有背景色的元素

将其附加到DOM，以及

测试背景色是否仍然存在：

Chrome有自己的功能，通常不需要检测。但如果检测到，则：

对于MacOS，您可以检测用户是否有以下情况：

isUsingMacInvertedColors = () => {
      const mediaQueryList = window.matchMedia('(inverted-colors: inverted)');
      return mediaQueryList.matches;
}

然后您可以应用您的样式规则

---

注意：我以前曾疯狂尝试过。答案让我暂时停止尝试，但我希望将来有更好的解决方案。

请注意，如果您想从浏览器启用高对比度模式，您不能。此答案是如何在维护媒体质量的同时通过单击按钮应用高对比度样式这是一个不依赖JavaScript工作的系统

此解决方案允许您将IE的样式保留为媒体查询，但也允许手动切换。这取决于您的高对比度CSS是否位于单独的外部文件中

我们要做的是将包含高对比度CSS规则的样式表添加为外部文件

我们给这个文件一个唯一的ID（

#doNotChangeMe

）和相关的媒体查询

media=“screen and（-ms high contrast:active）”

因为上面的文件只适用于IE，所以我们可以放心不使用它

然后，我们创建一个函数，该函数还可以通过单击按钮添加和删除此样式表

我创建了一个简单的切换函数，使用CSS选择器查询样式表是否存在（没有

#doNotChangeMe

id）

'link[href*=“'+externalFileName+”]：不（#doNotChangeMe）

（查找带有我们提供的

href

的链接，只要它没有相关ID）

然后我们看看这个CSS文件是否存在于DOM中，如果不存在，我们将再次添加它（假设您的高对比度CSS是DOM中的最后一个样式表，这不会造成任何伤害），否则我们将删除它

我确实尝试通过编程方式更改媒体查询来使其更干净，但是这在浏览器中似乎有混合的结果，并且上述操作似乎始终有效（例如，如果您尝试更改

media.mediaText

，CORS安全策略将起作用）

为了便于演示，我在示例中链接了引导样式表。您必须检查DOM以查看此函数是否未触及高对比度样式表（或者在IE中启用高对比度模式以查看切换是否不影响任何内容）

---

请注意我没有向切换按钮添加任何指示器来显示模式是否处于活动状态，请确保添加相关WAI-ARIA、按钮文本等

//请注意，以下假设您不想干扰正常的媒体查询，如果您希望启用高对比度模式的用户，则需要修改此选项以删除ignoreIdOrClass部分，而使用包含状态的变量。
var ignoreidorcass='#doNotChangeMe'；//这是我们不想接触的DOM中已经存在的文件的ID
var externalFileName=document.querySelector（ignoreIdOrClass）.href；//获取要复制的文件的URL
函数toggleHighContrast（）{
var linkNode=document.querySelector（'link[href*=“'+externalFileName+'”]：not（'+ignoreIdOrClass+'））；//如果我们自己已将此样式表添加到DOM中，请忽略ID为“忽略”的样式表
如果（！linkNode）{//我们的css文件副本不存在，那么创建它并将其添加到文档头
var head=document.head；
var link=document.createElemen
isUsingMacInvertedColors = () => {
      const mediaQueryList = window.matchMedia('(inverted-colors: inverted)');
      return mediaQueryList.matches;
}