为什么将style.display设置为“ block”时会更改div的大小？

Question

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

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>