用javascript改变饱和度答案

【问题标题】：Change saturation with javascipt用javascript改变饱和度
【发布时间】：2021-07-28 17:16:04
【问题描述】：

我想知道如何使用 javascript 创建一些东西，当函数发生时，主体的饱和度会发生变化。我目前正在使用 css 来完成这个，但我需要一种方法来切换到 javascript。

当前代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
  body {
  background-image: url('https://www.w3schools.com/css/img_mountains.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}</style>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="saturationAdjust()">
  Change saturation
  </button>
</body>
</html>

当函数saturationAdjust()发生时，body的饱和度应该从默认改为(4)。这是一个使用 css 的示例：filter: saturate(4);。此过滤器应在函数发生时应用。如何做到这一点？

【问题讨论】：

与过滤器无关，但如果您不希望山脉在较小（较窄的方面）设备上被压扁，背景尺寸：包含可以提供帮助。
好的，谢谢，我稍后再看看。这只是我放在一起的一个非常基本的演示，而不是我的实际代码。

标签： javascript html jquery css frontend

【解决方案1】：

您可以在样式表中添加一个类，然后将该类添加到正文中。相反，如果您想删除该类，您可以使用元素的 classList 上的 remove 函数来完成。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
  body {
  background-image: url('https://www.w3schools.com/css/img_mountains.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
.saturate {
  filter: saturate(4);
}
</style>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="saturationAdjust()"></button>
  <script>
  function saturationAdjust() {
    document.body.classList.add('saturate');
  }
  </script>
</body>
</html>

【讨论】：

我测试了代码，但它不工作。我不确定为什么，按钮标签没有关闭，但我关闭了标签，代码仍然无法正常工作。
嗨，不工作是什么意思？是否将新类添加到 body 元素中（检查浏览器的检查器）。当我运行它时，它确实添加了类，但对元素没有明显影响。
你好，很抱歉出错，代码运行正常，我忘了效果不会对背景图像产生影响。再次抱歉。谢谢你的代码！
如果你把背景放在正文中的 div 上，它会产生效果 - 抱歉，我应该发现其中的差异。