javascript - 为什么 style.display 设置为 'block' 时会改变我的 div 的大小？

Question

我有 3 个 div，每个包含一个 google 时间轴图表。3 个按钮，用于在 3 个 div 中的每一个之间切换。我使用 javascript 隐藏其他 2 个 div 并显示一个。如果我将所有 div 设置为显示它们都具有相同的长度和宽度。但是，当我开始在它们之间切换时，只有以 display: 'block' 开始的那个保持相同的大小，而其余的在切换显示时变得更小。我已经尝试在我的 javascript 函数中设置 div 大小，但没有用。当我检查其中一个切换的 div 上的元素时，它显示 400 像素的宽度。

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('timeline2');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);

  chart.draw(dataTable);
}

google.charts.setOnLoadCallback(drawChart2);

function drawChart2() {
  var container = document.getElementById('timeline3');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);

  chart.draw(dataTable);
}

google.charts.setOnLoadCallback(drawChart3);

function drawChart3() {
  var container = document.getElementById('timeline4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);

  chart.draw(dataTable);
}

function showMonth() {
  document.getElementById('timeline3').style.display = 'none';
  document.getElementById('timeline4').style.display = 'none';
  document.getElementById('timeline2').style.display = 'block';
}

function showWeek() {
  document.getElementById('timeline3').style.display = 'block';
  document.getElementById('timeline4').style.display = 'none';
  document.getElementById('timeline2').style.display = 'none';
}

function showDay() {
  document.getElementById('timeline3').style.display = 'none';
  document.getElementById('timeline4').style.display = 'block';
  document.getElementById('timeline2').style.display = 'none';
}

#timeline2 {
  height: 300px;
  width: 1791px;
  background-color: red;
}

#timeline3 {
  display: none;
  height: 300px;
  width: 1791px;
  background-color: blue;
}

#timeline4 {
  display: none;
  height: 300px;
  width: 1791px;
  background-color: pink;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button class='monthb' onclick="showMonth()">Month</button>
<button class='weekb' onclick="showWeek()">Week</button>
<button class='dayb' onclick="showDay()">Day</button>
<br />
<div id="timeline2"></div>
<div id="timeline3"></div>
<div id="timeline4"></div>

Answer 1

图表的宽度似乎是通过检查其容器的宽度来确定的。但是，如果容器不可见，则无法正确确定宽度。

考虑在每个 chart.draw() 之后隐藏 div 。 (这些可以重构以删除一些重复的逻辑，但为了演示，我只是将它添加到应该以隐藏方式开始的两个图表中。)

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('timeline2');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);

  chart.draw(dataTable);
}

google.charts.setOnLoadCallback(drawChart2);

function drawChart2() {
  var container = document.getElementById('timeline3');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);

  chart.draw(dataTable);
  document.getElementById('timeline3').style.display = 'none';
}

google.charts.setOnLoadCallback(drawChart3);

function drawChart3() {
  var container = document.getElementById('timeline4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);

  chart.draw(dataTable);
  document.getElementById('timeline4').style.display = 'none';
}

function showMonth() {
  document.getElementById('timeline3').style.display = 'none';
  document.getElementById('timeline4').style.display = 'none';
  document.getElementById('timeline2').style.display = 'block';
}

function showWeek() {
  document.getElementById('timeline3').style.display = 'block';
  document.getElementById('timeline4').style.display = 'none';
  document.getElementById('timeline2').style.display = 'none';
}

function showDay() {
  document.getElementById('timeline3').style.display = 'none';
  document.getElementById('timeline4').style.display = 'block';
  document.getElementById('timeline2').style.display = 'none';
}

#timeline2 {
  height: 300px;
  width: 1791px;
}

#timeline3 {
  height: 300px;
  width: 1791px;
}

#timeline4 {
  height: 300px;
  width: 1791px;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button class='monthb' onclick="showMonth()">Month</button>
<button class='weekb' onclick="showWeek()">Week</button>
<button class='dayb' onclick="showDay()">Day</button>
<br />
<div id="timeline2"></div>
<div id="timeline3"></div>
<div id="timeline4"></div>