为什么该函数不能与 else If 一起使用而与 else 语句一起使用？

Question

我有一个 id 为“sd-nav-bar”的元素，显示：inline-block，

我有一个按钮（点击它后）会隐藏显示的元素，反之亦然。

但是包含两个 If 的隐藏函数根本不起作用。

let hider = () => {
    let nav = document.querySelector('#sd-nav-bar');  
    if( nav.style.display == 'inline-block' ) {
        nav.style.display = 'none'
    }
    else if( nav.style.display == 'none' ) {
        nav.style.display = 'inline-block';
    };
}

在我用 'else statment' 替换第二个 if 之后它起作用了，唤醒的代码是：

let hider = () => {
    let nav = document.querySelector('#sd-nav-bar');  
    if( nav.style.display == 'inline-block' ) { 
        nav.style.display  = 'none'
    }
    else {
        nav.style.display = 'inline-block';
    }
};

那么为什么会这样？第二个IF错了吗？或者我只需要在这里使用 else 语句，为什么？

Answer 1

我认为问题在于最后一个右大括号之前的分号错误 - 它应该像您的第二个代码片段中那样位于它后面：

let hider = () => {
    let nav = document.querySelector('#sd-nav-bar');  
    if( nav.style.display == 'inline-block' ) {
        nav.style.display = 'none'
    }
    else if( nav.style.display == 'none' ) {
        nav.style.display = 'inline-block';
    }
};

Answer 2

这个问题的答案很简单。如果 else/if-variant 不工作，则表示没有条件匹配。

nav.style 将 return 一个仅包含 inline 样式的对象。您可能已经在样式表中设置了初始 #sd-nav-bar 样式，在这种情况下，在内联样式中 不存在 。由于这个原因 nav.style.display 将 return 一个空字符串，它既不匹配 'inline-block' 也不匹配 'none'.

const nav = document.querySelector("#sd-nav-bar");
console.log("display:", nav.style.display);

#sd-nav-bar {
  display: inline-block;
}

<div id="sd-nav-bar"></div>

要匹配 display 的计算值，请使用 getComputedStyle().

const nav = document.querySelector("#sd-nav-bar");
const computedStyle = getComputedStyle(nav);
console.log("display:", computedStyle.display);

#sd-nav-bar {
  display: inline-block;
}

<div id="sd-nav-bar"></div>

为什么该函数不能与 else If 一起使用而与 else 语句一起使用？

why the function didn't work with else If and works with else statment?

javascript

if-statement

display