当单击鼠标左键时，正方形将变暗。当你用右键点击时，方块会变得更亮
我希望我的例子对你有用。

实施例1

const square = document.getElementById('square');

const darkenSquare = () => {
    let currentBrightness = square.dataset.brightness || 100;
    currentBrightness = parseInt(currentBrightness) - 10;

    if (currentBrightness >= 0) {
        square.style.filter = `brightness(${currentBrightness}%)`;
        square.dataset.brightness = currentBrightness;
    }
};

const lightenSquare = () => {
    let currentBrightness = square.dataset.brightness || 100;
    currentBrightness = parseInt(currentBrightness) + 10;

    if (currentBrightness <= 100) {
        square.style.filter = `brightness(${currentBrightness}%)`;
        square.dataset.brightness = currentBrightness;
    }
};

square.addEventListener('click', darkenSquare);
square.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    lightenSquare();
});

.square {
    width: 200px;
    height: 200px;
    background-color: blue;
}

<div class="square" id="square"></div>

实施例2

在这个例子中，我使用了HSL颜色值。这允许通过改变光值来将颜色改变为黑色或白色。
鼠标左键将淡出为黑色。右边会亮起白色

const square = document.getElementById('square');

const darkenSquare = () => {
    let currentBrightness = square.dataset.brightness;
    currentBrightness = parseInt(currentBrightness) - 10;

    if (currentBrightness >= 0) {
        square.style.backgroundColor = `hsl(240, 100%,${currentBrightness}%)`
        square.dataset.brightness = currentBrightness;
    }
};

const lightenSquare = () => {
    let currentBrightness = square.dataset.brightness;
    currentBrightness = parseInt(currentBrightness) + 10;

    if (currentBrightness <= 100) {
        square.style.backgroundColor = `hsl(240, 100%,${currentBrightness}%)`
        square.dataset.brightness = currentBrightness;
    }
};

square.addEventListener('click', darkenSquare);
square.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    lightenSquare();
});

.square {
    width: 200px;
    height: 200px;
    background-color: hsl(240, 100%, 50%);
}

<div class="square" id="square" style="background-color: hsl(240, 100%, 50%);" data-brightness="50"></div>

我个人会这样解决这个问题：我会将想要改变暗度的元素放在 Package 器中，与“filter”元素一起。过滤器元件只是一个相同大小的正方形，背景颜色为黑色。在js中，我们读取过滤器元素的不透明度，并增加它。我发现这是“最干净”的版本，因为它几乎不需要任何js代码。
Link to my Codepen
超文本标记语言：

<div id="wrapper">
  <div id="filter"></div>
  <div id="element"></div>
</div>

字符串
CSS：

#wrapper{
  position: relative;
  width: 50px;
  height: 50px;
}

#element{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: green;
}

#filter{
  position: absolute;
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 2;
  pointer-events: none;
}

型
JS：

let wrapper = document.querySelector("#wrapper")
let filter = document.querySelector("#filter");

wrapper.addEventListener("click", function(){
  let currentOpacity = Number(filter.style.opacity);
  if(currentOpacity < 1) filter.style.opacity = currentOpacity + 0.1;
})

型

你的shadingMode函数似乎使用亮度CSS滤镜实现了一个变暗效果。它以元素elem作为输入，每次交互都会将其亮度降低10%。
但是，代码中有几个问题需要解决：
currentBrightness变量将是具有百分比符号的字符串，例如“90%”。当使用.slice（11，-2）时，它会删除%符号，并将数字部分作为字符串。在执行算术运算之前，应该使用parseInt（）或parseFloat（）将其转换为数字。
由于您使用的是brightness（）滤镜，它会相对于原始亮度修改亮度，因此您应该设置元素的初始亮度值以使其正常工作。
以下是shadingMode函数的修正版本：

const shadingMode = (elem) => {
  let currentBrightness = parseFloat(elem.style.filter.slice(11, -1)); // Convert to a number
  if (isNaN(currentBrightness)) {
    // If currentBrightness is NaN, set an initial brightness value
    currentBrightness = 100;
  }

  if (currentBrightness > 0) {
    console.log("currentBrightness " + currentBrightness);
    elem.style.filter = `brightness(${currentBrightness - 10}%)`;
    console.log("elem.style.filter 2: " + elem.style.filter);
  } else {
    currentBrightness = 0;
  }
};

字符串
在这个修正后的版本中，我使用parseFloat（）将currentBrightness转换为数字。此外，如果未设置亮度（NaN），则该函数将初始亮度设置为100%（全亮）。然后，通过更新elem.style.filter属性，每次交互时将亮度降低10%。
请确保添加一个事件侦听器，以便在与元素交互时调用此函数，例如在单击事件上。此外，确保传递给shadingMode的元素具有filter属性，可以修改该属性以控制其亮度。