JavaScript按钮切换元素style.display失效：仅能隐藏无法显示

想要实现点击按钮切换id="abMe"元素的显示/隐藏，但目前仅能隐藏元素，无法切换回显示状态。

问题根源分析 #

1. HTML 触发逻辑错误
   • 按钮onclick属性写的是myFunction，缺少调用括号()，导致点击时不会执行函数
   • 使用了非标准自定义标签button2，应替换为标准<button>标签
   • <h1>标签放在<head>内违反HTML结构规范，必须移至<body>中
2. JavaScript 核心逻辑错误
   • 仅修改了临时变量displaySettings的值，未将新值赋值给元素的x.style.display，导致元素样式无变化
   • 初始状态下元素的display是通过CSS设置的，直接读取x.style.display会得到空字符串（该属性仅读取行内样式），原判断逻辑无法识别初始隐藏状态
3. CSS 选择器优化
   • 用元素ID#abMe作为选择器比自定义标签p2更精准，也符合常规开发习惯

修复后的完整代码 #

HTML 代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Oscar Li</title>
</head>
<body>
    <h1>Oscar Li</h1>
    <p>Junior Developer</p>
    <!--creates the cube-->
    <p id="abMe">"this is my text"</p>
    <p><button type="button" onclick="myFunction()">About me</button></p>
    <script type="text/javascript" src="/javascript/myFunction.js"></script>
</body>
</html>

JavaScript 代码

function myFunction() {
  var x = document.getElementById("abMe");
  // 获取元素实际生效的显示状态（包含CSS样式）
  var computedStyle = window.getComputedStyle(x);
  var displaySettings = computedStyle.display;
  
  if (displaySettings === "none") {
    x.style.display = "inline-block";
  } else {
    x.style.display = "none";
  }
}

CSS 代码

#abMe{
    position: relative;
    display: none;
}

修复说明 #

• 改用window.getComputedStyle()获取元素实际生效的display值，能正确识别CSS设置的初始隐藏状态
• 修复了按钮的触发逻辑，确保点击时能正确调用函数
• 调整HTML结构符合规范，改用标准标签提升页面兼容性

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