JS中element.style.display切换异常的原因咨询

核心问题出在**element.style.display的取值逻辑上：它只能读取元素的内联样式**（也就是直接写在元素style属性里的样式），而不是浏览器最终计算出来的样式。

具体拆解： #

假设你的<ul>初始是显示状态（对应display:block），但这个样式来自浏览器默认规则或者外部/内部CSS，并没有写在<ul>的style属性里——这时候ul.style.display的初始值是空字符串''，而不是你以为的'block'。

第一种代码（能正常切换）：

function callback(){ 
  ul.style.display = (ul.style.display === 'block') ? 'none' : 'block'; 
}

• 第一次点击：ul.style.display是空，不等于'block'，所以赋值为'block'（此时内联样式加上了display:block，元素还是显示，但内联样式有了具体值）。
• 第二次点击：ul.style.display是'block'，满足判断条件，赋值为'none'，元素隐藏。
• 之后的点击就会在'block'和'none'之间正常切换。

第二种代码（需要点击第二次才出现预期切换）：

function callback(){ 
  ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'; 
}

• 第一次点击：ul.style.display是空，不等于'none'，所以赋值为'none'——这时候元素其实已经隐藏了，但你可能因为误以为初始ul.style.display是'block'，觉得这次点击没达到“从显示切到隐藏”的预期；或者你把“切回显示”的操作当成了第一次有效切换，所以产生了“需点击第二次才切换”的错觉。

本质上就是你混淆了“内联样式”和“计算后样式”的区别，element.style只对内联样式生效，初始空值导致判断逻辑的第一次分支不符合预期。

内容的提问来源于stack exchange，提问作者Jacobo Velasquez