时间戳

首页 > 解决方案 > 用 javascipt 改变饱和度

javascript - 用 javascipt 改变饱和度

问题描述

我想知道如何使用 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的saturation应该从默认改为(4)。这是一个使用 css: 的示例filter: saturate(4);。此过滤器应在函数发生时应用。如何才能做到这一点？

标签： javascripthtmljquerycssfrontend

解决方案

您可以在样式表中添加一个类，然后将该类添加到正文中。相反，如果您想删除该类，您可以使用元素的 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>

推荐阅读