JavaScript元素.style.setProperty（）不工作

我正在创建一个带有导航栏和一些JavaScript的网站，用于设置div（class:

bubble

）的位置和背景渐变，该div根据用户滚动到的位置突出显示导航栏项。下面是我代码中的每一个细节：

const sections=document.querySelectorAll（'selection'）；
const bubble=document.querySelector（'.bubble'）；
常数梯度='线性梯度（至右上，#000428，#004e92）'；
常量选项={
阈值：0.7
}
let observer=新的IntersectionObserver（导航检查，选项）；
功能导航检查（条目）{
entries.forEach（entry=>{
const className=entry.target.className；
const activeAnchor=document.querySelector（`[data page=${className}]`）；
const gradientIndex=entry.target.getAttribute（`data index`）
const coords=activeAnchor.getBoundingClientRect（）；
常量方向={
高度：坐标高度，
宽度：coords.width，
top:coords.top，
左：coords.左
};
if（输入。isIntersecting）{
bubble.style.setProperty（'left'，`${directions.left}px`）
bubble.style.setProperty（'top'，`${directions.top}px`）
bubble.style.setProperty（'width'，`${directions.width}px`）
bubble.style.setProperty（'height'，`${directions.height}px`）
}
});
}
sections.forEach（section=>{
观察员：观察（第节）；
});

---

现在，我对JavaScript非常陌生，不知道为什么它没有任何作用。有人能帮我吗？

我也在玩JavaScript，从这个开始

似乎是相同的代码

我改变了：

const-activeAnchor=document.querySelector（“[data page=“+CSS.escape（className）+”]”）

if（输入。isIntersecting）{ bubble.style.setProperty（'left'，directions.left.toString（）+'px'）； bubble.style.setProperty（'top'，directions.top.toString（）+'px'）； bubble.style.setProperty（'width'，directions.width.toString（）+'px'）； bubble.style.setProperty（'height'，directions.height.toString（）+'px'）； console.log（bubble.style）； }

它是有效的，但不要问我为什么

这里是我的完整JavaScript文件：

const section = document.querySelectorAll('section');
const bubble = document.querySelector('.bubble');
const gradients = [
    "linear-gradient(to right top, #56ab2f, #a8e063)",
    "linear-gradient(to right top,  #cb2d3e, #ef473a)",
    "linear-gradient(to right top,  #5A3F37, #2c7744)",
];

const options = {
    threshold: 0.7
}

let observer = new IntersectionObserver(navCheck, options);

function navCheck(entries) {
    entries.forEach(entry => {
        const className = entry.target.className;


       const activeAnchor = document.querySelector("[data-page="+ CSS.escape(className) + "]");


        const gradientIndex = entry.target.getAttribute("data-index");
        const coords = activeAnchor.getBoundingClientRect();

        const directions = {
            height: coords.height,
            width: coords.width,
            top: coords.top,
            left: coords.left
        };

        if (entry.isIntersecting){
            bubble.style.setProperty('left', directions.left.toString() + 'px');
            bubble.style.setProperty('top', directions.top.toString() + 'px');
            bubble.style.setProperty('width', directions.width.toString() + 'px');
            bubble.style.setProperty('height', directions.height.toString() + 'px');
            console.log(bubble.style);
        }
    });
}

section.forEach(section => {
    observer.observe(section);
});

---

我也在玩JavaScript，从这里开始

似乎是相同的代码

我改变了：

const-activeAnchor=document.querySelector（“[data page=“+CSS.escape（className）+”]”）

if（输入。isIntersecting）{ bubble.style.setProperty（'left'，directions.left.toString（）+'px'）； bubble.style.setProperty（'top'，directions.top.toString（）+'px'）； bubble.style.setProperty（'width'，directions.width.toString（）+'px'）； bubble.style.setProperty（'height'，directions.height.toString（）+'px'）； console.log（bubble.style）； }

它是有效的，但不要问我为什么

这里是我的完整JavaScript文件：

const section = document.querySelectorAll('section');
const bubble = document.querySelector('.bubble');
const gradients = [
    "linear-gradient(to right top, #56ab2f, #a8e063)",
    "linear-gradient(to right top,  #cb2d3e, #ef473a)",
    "linear-gradient(to right top,  #5A3F37, #2c7744)",
];

const options = {
    threshold: 0.7
}

let observer = new IntersectionObserver(navCheck, options);

function navCheck(entries) {
    entries.forEach(entry => {
        const className = entry.target.className;


       const activeAnchor = document.querySelector("[data-page="+ CSS.escape(className) + "]");


        const gradientIndex = entry.target.getAttribute("data-index");
        const coords = activeAnchor.getBoundingClientRect();

        const directions = {
            height: coords.height,
            width: coords.width,
            top: coords.top,
            left: coords.left
        };

        if (entry.isIntersecting){
            bubble.style.setProperty('left', directions.left.toString() + 'px');
            bubble.style.setProperty('top', directions.top.toString() + 'px');
            bubble.style.setProperty('width', directions.width.toString() + 'px');
            bubble.style.setProperty('height', directions.height.toString() + 'px');
            console.log(bubble.style);
        }
    });
}

section.forEach(section => {
    observer.observe(section);
});

---

你检查了

if（entry.isIntersecting）{

是否执行了吗？你检查了

if（entry.isIntersecting）{

是否执行了吗？谢谢！这帮了大忙。它工作得很好！（）・ω・。)谢谢！这帮了大忙。它工作得很好・ω・。)