Question

这是一个小代码示例：

var moving_nav = document.getElementById("moving_nav");
var logo = document.getElementById("logo");

setInterval(function(){ 
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if ( scrolled >= 100) {
        moving_nav.style.position = "fixed";
        moving_nav.style.top = "0";
        logo.style.width:"60px";
        logo.style.height:"60px";
    } 
    else {
        moving_nav.style.position = "absolute";
        moving_nav.style.top = "100px";
        logo.style.width:"120px";
        logo.style.height:"120px";
    }
}, 10);

当你滚动它时，它的目的是让我的菜单变得粘稠。这非常好:)。但后来我希望我的徽标也能改变。那就是它停止了工作。（就在我包括出现“logo”的行之后。）

浏览器控制台说缺少“;”在第9行（第一个“宽度”），但我不知道它究竟属于哪里。我尝试通过不使用var来解决问题，但实际上每次都使用getElementById。没有为我工作。此外，我尝试评论出我的标志样式的线条，其余的工作完美。我只是找不到问题:(请帮忙！

PS：如果你觉得这太容易了，也不要生我的气。谈到JS，我是个新手。此外，我不是母语，所以请原谅我（缺少的）英语技能;）

谢谢，Diavo

Answer 1

    logo.style.width="60px";
    logo.style.height="60px";

而不是

    logo.style.width:"60px";
    logo.style.height:"60px";

另外一个。

Answer 2

您使用:代替=。我们在 css

中使用:

var moving_nav = document.getElementById("moving_nav");
    var logo = document.getElementById("logo");

    setInterval(function(){ 
        var scrolled = window.pageYOffset || document.documentElement.scrollTop;
        if ( scrolled >= 100) {
            moving_nav.style.position = "fixed";
            moving_nav.style.top = "0";
            logo.style.width="60px";
            logo.style.height="60px";
        } 
        else {
            moving_nav.style.position = "absolute";
            moving_nav.style.top = "100px";
            logo.style.width="120px";
            logo.style.height="120px";
        }
    }, 10);

Answer 3

对于任何样式属性，只有在使用js时才必须使用=。使用css时你必须使用：

if ( scrolled >= 100) {
    moving_nav.style.position = "fixed";
    moving_nav.style.top = "0";
    logo.style.width = "60px";
    logo.style.height = "60px";
} 
else {
    moving_nav.style.position = "absolute";
    moving_nav.style.top = "100px";
    logo.style.width = "120px";
    logo.style.height = "120px";
}

将 : 替换为 =

简单的Javascript更改样式不起作用

3 个答案: