如何用JavaScript隐藏显示行内元素并保留其原有display属性

实现按钮控制行内（inline）元素显隐切换时，执行document.getElementById('').style.display = 'inline';语句设置元素显示，元素会被渲染为块级（block）元素，无法恢复初始的inline显示状态。
复现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
          }
          #mydata{
            display:none;
            font-size: 25;
          }
        .chartCard {
            width: 100vw;
            height: calc(90vh - 100px);
            background: rgb(133, 43, 43);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .chartBox {
            width: 650px;
            padding: 8px;
            border-radius: 20px;
            margin: 1px 22px;
            border: solid 3px rgba(255, 26, 104, 1);
            background: white;
          }
          .button:hover{
            background-color: #005201;
            color: rgb(255, 253, 250);;
        }
            .button {
                background-color: rgb(69, 9, 188);
                border: none;
                color: white;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 20px;
                margin: 2px 2px;
                transition-duration: 0.4s;
                cursor: pointer;
            }
    </style>
    <script>
        function changedata(parameter){
            if(parameter==0){
                document.getElementById('myreport').style.display = 'none';
                document.getElementById('mydata').style.display = 'block';
            }
            else{
                document.getElementById('mydata').style.display = 'none';
                document.getElementById('myreport').style.display = 'inline';
            }
        }
    </script>
</head>
<body>
    <button class="button" onclick="changedata(1)">Myreport</button>
    <button class="button" onclick="changedata(0)">Mydata</button>
    <div id="mydata">
        <h1>This is my Report</h1>
    </div>
    <div class="chartCard" id="myreport">
        <div class="chartBox">
            <p>Ram</p>
        </div>
        <div class="chartBox">
            <p>Shyam</p>
        </div>
    </div>
</body>
</html>

直接通过style.display硬编码写入具体显示值时，内联样式优先级高于CSS样式表和浏览器默认样式，会覆盖元素原本的display规则。
你的代码中id为myreport的元素绑定了.chartCard类，该类预设display: flex，切换时硬写入display: inline会直接覆盖原有flex布局规则，导致元素渲染效果不符合预期。

不要硬编码写死元素的display值来恢复显示，推荐两种实现方式：

• 方式1：显示元素时清空内联display属性，让元素自动回退到原有样式规则
  首先把初始隐藏的样式从id选择器中剥离，用单独的类控制：

  /* 替换原来#mydata中的display:none */
  .hidden {
      display: none;
  }
  

  给初始需要隐藏的#mydata加上hidden类，再修改切换逻辑：

  function changedata(parameter){
      if(parameter==0){
          document.getElementById('myreport').style.display = 'none';
          document.getElementById('mydata').style.display = '';
      }
      else{
          document.getElementById('mydata').style.display = 'none';
          document.getElementById('myreport').style.display = '';
      }
  }
  

  这种写法不会修改元素原本的display规则，清空内联样式后元素会自动恢复初始显示状态。
• 方式2：通过类切换控制显隐，完全避免直接操作内联样式
  直接复用上面定义的.hidden类，切换时只做类的增删，不需要关心元素原本的display值：

  function changedata(parameter){
      const myreport = document.getElementById('myreport');
      const mydata = document.getElementById('mydata');
      if(parameter==0){
          myreport.classList.add('hidden');
          mydata.classList.remove('hidden');
      }
      else{
          mydata.classList.add('hidden');
          myreport.classList.remove('hidden');
      }
  }
  

  这种方式可维护性更强，也不会出现显示模式被覆盖的问题。

内容的提问来源于stack exchange，提问作者Gourav kr Singh