简单的Javascript改变样式是行不通的

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。对我来说没用。此外，我试着注释出我的标志样式的线条，其余的工作完美。我就是找不到问题:(请帮帮我!

如果你认为这太容易了，也不要生我的气。说到JS，我还是个新手。此外，我的母语不是英语，所以请原谅我的(缺失的)英语技能;)

谢谢,Diavo

Answer 1

对于任何样式属性，您只能在使用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";
}

替换 : 与 =

Answer 2

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

不是

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

Answer 3

您用:代替=，我们在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);