时间戳

首页 > 解决方案 > Javascript 重置我现有的 CSS 对齐方式

javascript - Javascript 重置我现有的 CSS 对齐方式

问题描述

下面是我为隐藏/显示表格而编写的一些 javascript 按钮。默认情况下，表格以 margin: auto 为中心，并且可以正常工作。

但是，每当我单击按钮隐藏/显示表格时，它都会重置自动边距，并使表格左对齐。

如果我禁用 display:none，它会显示表格居中，如果我删除 javascript，它会正常显示。我已经尝试再次设置它

document.getElementById("vcontrols").style.margin = "0 auto"

但它不起作用

这是使用的CSS。

    <style>
        body {
            background-color: #111;
        }

        .container {
            max-width: 80%;
            margin: auto;
            background: #333;
            color: #fff;
            text-align: center;
        }

        .tabela {
            margin: 0 auto;
        }

        #vcontrols {
            display: none;
        }
</style>

这是脚本

 function toggleControls() {
    var Skrivalica = document.getElementById('vcontrols');
    var displaySetting = Skrivalica.style.display;
    var hideshow = document.getElementById('hideshow');

    if (displaySetting == 'block') {
      Skrivalica.style.display = 'none';
      hideshow.innerHTML = 'Full Details';
    }
    else {
      Skrivalica.style.display = 'block';
      hideshow.innerHTML = 'Hide Details';
    }
  }

这是主体，表格

        <div class="container">
        <button onclick="toggleControls()" id="hideshow">Full Details</button>
        <table class="tabela" id="vcontrols">
            <tr>
                <th>Action 1</th>
                <th>Action 2</th>
                <th>Action 3</th>
                <th>Action 4</th>
                <th>Action 5</th>
            </tr>
            <tr>
                <td>Item 1</td>
                <td>Item 2</td>
                <td>Item 3</td>
                <td>Item 4</td>
                <td>Item 5</td>
            </tr>
        </table>
    </div>

标签： javascriptcss

解决方案

function toggleControls() {
    var Skrivalica = document.getElementById('vcontrols');
    var displaySetting = Skrivalica.style.display;
    var hideshow = document.getElementById('hideshow');
    
    if (displaySetting === 'block') {
      Skrivalica.style.display = 'none';
      hideshow.textContent = 'Full Details';
    }
    else {
      Skrivalica.style.display = 'block';
      hideshow.textContent = 'Hide Details';
    }
}
    body {
        background-color: #111;

    }
    
    .btn-container {
        display: flex;
        justify-content: center;
    }

    .container {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        background: #333;
        color: #fff;
        text-align: center;
        display: flex;
    }

    .tabela {
        margin: 0 auto;
    }

    #vcontrols {
        display: none;
    }
<div class="btn-container">
  <button onclick="toggleControls()" id="hideshow">Full Details</button>
  </div>
  <div class="container">
    <table class="tabela" id="vcontrols">
        <tr>
            <th>Action 1</th>
            <th>Action 2</th>
            <th>Action 3</th>
            <th>Action 4</th>
            <th>Action 5</th>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
            <td>Item 5</td>
        </tr>
    </table>
</div>

也许是一种更简单的方法，但我更改了一些 HTML 和 CSS。让 JS 一个人呆着。似乎为我工作。让我知道它是否不是您想要的！

推荐阅读