javascript - 我可以用 javascript 更改正文 html 中特定区域的样式吗？

Question

我受到介绍 Logo 的启发，想尝试在网站 UI 中实现它。然而，我尝试的越多，我就越意识到我只是网站的初学者。

This is the image

function getCursorPosition(event) {
  let x = event.clientX;
  let y = event.clientY;

  document.body[x:y].style.filter = blur("0px");
}

This is my code .我可以根据鼠标移动使用 javascript 更改 body html 特定区域的样式吗？

我的期望是网站页面的主体有 filter = blur(5px)。这样光标到达的特定区域将其样式更改为 filter = blur(0px)。这可能吗？

Answer 1

你可以做的是用一些元素覆盖你的内容区域，让其中一个(在鼠标光标的位置)透明，你可以模糊围绕透明元素的其余元素。

此外，在每次 mousemove 时更改 DOM(可能每秒 200 次)不是一个好主意。因此，您最多需要每 ~16 毫秒(即 60fps)执行一次，否则您将获得“垃圾”帧和滞后行为。幸运的是，您可以为此目的使用 requestAnimationFrame()。

这是一个如何执行此操作的示例(您也可以使用下面的蓝色按钮运行此代码段以实时查看结果):

window.addEventListener('DOMContentLoaded', () => {
  const blurEl = document.querySelector('.blur');
  let curX, curY, isRenderScheduled = false;
  blurEl.addEventListener('mousemove', ({x,y}) => {
      curX = x;
      curY = y;
      if(!isRenderScheduled) {
        isRenderScheduled = true;
        requestAnimationFrame(() => {
          blurEl.setAttribute('style', `--x:${curX}px;--y:${curY}px`);
          isRenderScheduled = false;
        });
      }
  });
});

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-content: center;
}
.blur {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
}
.blur > div {
  display: flex;
  flex-direction: column;
}
.blur:before,
.blur:after,
.blur > div:before,
.blur > div:after {
  content: '';
  backdrop-filter:blur(5px);
  flex-grow: 1;
  flex-shrink: 1;
}
.blur:before {
  min-width: var(--x, auto);
  max-width: var(--x, auto);
}
.blur > div:before {
  min-height: var(--y, auto);
  max-height: var(--y, auto);
}
.transparent {
  flex-grow: 0;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border: 1px solid silver;
}

<div class="content"> 
  <h1>This is the content</h1>
  <div class="blur" style="--x:auto;--y:auto;">
    <div>
      <div class="transparent"></div>
    </div>
  </div>
</div>

注意:我在 .blur 元素上使用了 CSS 变量，只是因为不可能为伪元素添加内联样式(:before, :after )。如果您更喜欢使用普通元素，则不需要 CSS 变量。