Javascript 如何修改我的js以使其正常工作？

这段代码来自这里：

文件
@导入url（'https://fonts.googleapis.com/css?family=Fira+Sans:100200300400500600700800900’；
#盒子{
字体系列：“Fira Sans”，无衬线；
字号：80px；
线高：100px；
文本对齐：居中；
背景色：#000000；
颜色：#ffffff；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#网格项{
宽度：1200px；
显示：网格；
网格模板列：重复（12，1fr）；
网格自动行：100px；
}
.信{
字号：100；
变换：比例（0.2）；
转换：转换0.75s；
}
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
s
U
P
E
R
H
我
document.addEventListener（“mousemove”，函数（事件）{
const x=event.pageX；
const y=event.pageY；
document.queryselectoral（“div”）.forEach（div=>{
常数dx=（div.offsetLeft+50）-x；
常数dy=（等距偏移+50）-y；
const dist=Math.sqrt（dx*dx+dy*dy）；
常量分数=数学经验（dist*-0.003）；
div.style.transform=“刻度（“+score+”）；
div.style.fontweaght=100+（100*数学地板（8*分数））；
});
});

一切正常。但当我试图将其包含在wordpress中时，该部分就消失了。问题可能是我的页面中还有其他div。所以我想修改js，以针对所有样式化的div（带有类），而不是简单的div选择器。但我不知道如何才能做到这一点；(

谢谢你宝贵的帮助

<script>

    document.getElementById("grid-items").addEventListener("mousemove", function(event) {
        const x = event.clientX;
        const y = event.clientY;

    document.querySelectorAll("#grid-items > div.letter").forEach(div => {
        const dx = (div.offsetLeft + 50) - x;
        const dy = (div.offsetTop + 50) - y;
        const dist = Math.sqrt(dx * dx + dy * dy);

        const score = Math.exp(dist * -0.003);

        div.style.transform = "scale(" + score + ")";
        div.style.fontWeight = 100 + (100 * Math.floor(8 * score));
    });
});

编辑：谢谢你们的帮助。问题不在于用好的类来定位合适的div。在发布我的noob问题之前，我已经试着在几个小时内解决了这个问题(

我认为最重要的问题是演示只在一个页面上运行。我想做的是将它放在远离文档顶部的部分…因此在这种情况下，pageY不是一个好的函数（它返回的数字太大，无法使代码正常工作）。我现在需要的是（我猜），正在修改这两行，以便根据文档上的网格部分返回鼠标位置：

const x=event.pageX； const y=event.pageY

再一次，我不知道我该怎么做…我想补偿是一条路，但我不知道怎么做

编辑2： 我使用event.clientX和event.clientY修复了这个问题。 谢谢你宝贵的帮助

<script>

    document.getElementById("grid-items").addEventListener("mousemove", function(event) {
        const x = event.clientX;
        const y = event.clientY;

    document.querySelectorAll("#grid-items > div.letter").forEach(div => {
        const dx = (div.offsetLeft + 50) - x;
        const dy = (div.offsetTop + 50) - y;
        const dist = Math.sqrt(dx * dx + dy * dy);

        const score = Math.exp(dist * -0.003);

        div.style.transform = "scale(" + score + ")";
        div.style.fontWeight = 100 + (100 * Math.floor(8 * score));
    });
});

document.getElementById（“网格项”）.addEventListener（“mousemove”，函数（事件）{
const x=event.clientX；
const y=event.clientY；
document.queryselectoral（“#网格项>div.letter”）.forEach（div=>{
常数dx=（div.offsetLeft+50）-x；
常数dy=（等距偏移+50）-y；
const dist=Math.sqrt（dx*dx+dy*dy）；
常量分数=数学经验（dist*-0.003）；
div.style.transform=“刻度（“+score+”）；
div.style.fontweaght=100+（100*数学地板（8*分数））；
});
});

试试看

---

document.querySelectorAll（“#grid items>.letter”）.forEach（div=>{

而不是当前的

div

选择器

---

上面将选择所有类名为

字母的div，这些div是
#grid items
div的直接子级。
尝试调用节标记本身上的“mousemove”事件

document.getElementsByTagName('section')[0].addEventListener("mousemove", function (event) {
  const x = event.pageX;
  const y = event.pageY;
  //document.querySelectorAll("div").forEach(div => {
  document.getElementsByTagName('section')[0].querySelectorAll('div').forEach(div => {

    const dx = (div.offsetLeft + 50) - x
    const dy = (div.offsetTop + 50) - y
    const dist = Math.sqrt(dx * dx + dy * dy)

    const score = Math.exp(dist * -0.003)

    div.style.transform = "scale(" + score + ")"
    div.style.fontWeight = 100 + (100 * Math.floor(8 * score))
  })
})

document.queryselectoral（“div”）；
Yup-您可以使用：
document.getElementsByClassName（“letter”）.forEach（div=>{