Question

我想知道如何使用 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);。当函数发生时应该应用这个过滤器。这怎么办？

Answer 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>

使用 javascipt 更改饱和度

1 个答案: