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

Question

I have 3 divs each one containing a google timeline chart. 我有3个div，每个div都包含一个Google时间轴图表。 3 buttons to toggle between each of the 3 divs. 3个按钮可在3个div之间切换。 I use javascript to hide the 2 other divs and show one. 我使用javascript隐藏其他2个div并显示一个。 If I set all of the divs to show they all have the same length and width. 如果我将所有div设置为显示它们都具有相同的长度和宽度。 However, when I start toggling in between them, only the one that started as display: 'block' keeps the same size and the rest become much smaller when toggled to show. 但是，当我开始在它们之间切换时，只有以显示开头的一个：“块”保持相同的大小，而切换为显示时，其余的变得更小。 I've already tried setting the div size in my javascript functions, didn't work. 我已经尝试在我的javascript函数中设置div大小，但是没有用。 When I inspect element on one of the toggled divs it shows 400px for width. 当我检查其中一个切换的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

It seems like the chart's width is determined by examining the width of its container. 似乎图表的宽度是通过检查其容器的宽度确定的。 However if the container isn't visible, it cannot properly determine the width. 但是，如果看不到容器，则无法正确确定宽度。

Consider hiding the div after each chart.draw() . 考虑在每个chart.draw() 之后隐藏div。 (These could afford to be refactored to remove some duplicate logic but for sake of the demonstration, I've simply added it to the two charts that are supposed to start as hidden.) （可以对它们进行重构以删除一些重复的逻辑，但是为了演示起见，我只是将其添加到了应该以隐藏的形式开始的两个图表中。）

 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-29 15:10:29

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-29 15:10:29

解决方案1
1 已采纳 2019-07-29 15:10:29