JavaScript：如何调整div.card的大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript：如何调整div.card的大小相关的知识，希望对你有一定的参考价值。
对不起，我的英语不好，希望您能理解我遇到的那种问题。因此，这是代码，它的作用是调整div.cards的大小。我的意思是，当我全屏显示窗口时，表格正确显示了div.cards。因此，当我开始更改窗口的大小时，其中一些卡会更改某些行中的offsetHeight（始终取决于它们上的文本）。我已经附上了桌子的图像（带有非全屏窗口）。因此，正如您所看到的，当我更改窗口时，这些卡片也将更改为offsetHeight，因此，我已经实现的是对行中具有最高div.card的所有div.card应用相同的高度。我仍然卡住的地方是：当我将窗口返回全屏时，这些div.cards应该回到其原始的offsetHeight，但仍然无法理解该怎么做。
我已经尝试过，就像将所有div.cards的offsetHeight放入数组然后以某种方式还原它们一样，但是没有成功。my table
var table = document.getElementById("table");
var row, n, column, m, mColumn, t;
var maxOffSet = 0, minOffSet = 0;
for (row = 0, n = table.rows.length; row < n; row++)
for (column = 0, m = table.rows[row].cells.length; column < m; column++)
console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
// if (maxOffSet < table.rows[row].getElementsByClassName("card")[column].offsetHeight)
// maxOffSet = table.rows[row].getElementsByClassName("card")[column].offsetHeight;
//
// table.rows[row].style.minHeight = maxOffSet;
// for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++)
// table.rows[row].getElementsByClassName("card")[mColumn].style.height = maxOffSet + 'px';
//
;
HTML：
<tbody>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_da_smistare_todo">1</span><span class="counter" id="ragioneria_da_smistare_watch">(0) </span><span class="stagestext" id="ragioneria_da_smistare_Descr">Ragioneria da smistare</span></div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_rifiutati_todo">0</span><span class="counter" id="ragioneria_rifiutati_watch">(0) </span><span class="stagestext" id="ragioneria_rifiutati_Descr">Ragioneria rifiutati</span></div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="responsabile_da_smistare_todo">0</span><span class="counter" id="responsabile_da_smistare_watch">(0) </span> <span class="stagestext" id="responsabile_da_smistare_Descr">Responsabile da smistare</span> </div>
</div>
</div>
</td>
</tr>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ufficio_di_competenza_todo">0</span><span class="counter" id="ufficio_di_competenza_watch">(0) </span> <span class="stagestext" id="ufficio_di_competenza_Descr">Ufficio di competenza</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="responsabile_appr_pagamento_todo">0</span><span class="counter" id="responsabile_appr_pagamento_watch">(0) </span> <span class="stagestext" id="responsabile_appr_pagamento_Descr">Responsabile approvazione pagamento</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_appr_pagamento_todo">0</span><span class="counter" id="ragioneria_appr_pagamento_watch">(0) </span> <span class="stagestext" id="ragioneria_appr_pagamento_Descr">Ragioneria approvazione pagamento</span> </div>
</div>
</div>
</td>
</tr>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="direzione_todo">0</span><span class="counter" id="direzione_watch">(0) </span> <span class="stagestext" id="direzione_Descr">Direzione</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="presidenza_todo">0</span><span class="counter" id="presidenza_watch">(0) </span> <span class="stagestext" id="presidenza_Descr">Presidenza</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="sospesa_todo">0</span><span class="counter" id="sospesa_watch">(0) </span> <span class="stagestext" id="sospesa_Descr">Sospesa</span> </div>
</div>
</div>
</td>
</tr>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_rifiuta_pagamento_todo">0</span><span class="counter" id="ragioneria_rifiuta_pagamento_watch">(0) </span> <span class="stagestext" id="ragioneria_rifiuta_pagamento_Descr">Ragioneria rifiuta pagamento</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_da_pagare_todo">0</span><span class="counter" id="ragioneria_da_pagare_watch">(0) </span> <span class="stagestext" id="ragioneria_da_pagare_Descr">Ragioneria da pagare</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_pagam_parziale_todo">0</span><span class="counter" id="ragioneria_pagam_parziale_watch">(0) </span> <span class="stagestext" id="ragioneria_pagam_parziale_Descr">Ragioneria pagamento parziale</span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS：
.card
/*max-width: 500px*/;
margin: 5px 5px 5px 5px;
/*max-height: 60px;*/
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
-webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
.card-body
flex: 1 1 auto;
min-height: 1px;
padding: 1rem;
/*display: flex;*/
justify-content: center;
align-items: center;
.content
display: table;
/*width: 75%;*/
vertical-align: middle;
.content > span
display: table-cell;
vertical-align: middle;
CSS-JS：
$(document).ready(function ()
var style = document.createElement('style');
style.innerhtml = '\
body \
display: none;\
\
.logo-div \
background-image: url(view.do?id=1041&className=LOGO);\
height: 200px;\
width: auto;\
background-repeat: no-repeat;\
background-origin: content-box;\
background-position: center;\
margin-bottom: 5px;\
/*border-bottom: 5px solid #ef5114;*/\
\
.stagestext \
color: #ef5114;\
font-weight: bold;\
font-size: 1.3em;\
vertical-align: 10%;\
text-align: start;\
padding-left: 20px;\
/*padding-right: 20%;*/\
\
.datetext \
color: #546E7A;\
font-weight: bold;\
font-size: 1.5em;\
\
.counter \
/*border-right: 5px solid #1bb0e1;*/\
font-size: 2em;\
color: #1bb0e1;\
/*padding-left: 5px;*/\
/*cursor: pointer;*/\
width: 10%;\
\
.counterComp \
font-size: 2em;\
color: #1bb0e1;\
/*padding-right: 5px;*/\
/*cursor: pointer;*/\
width: 10%;\
\
.counter.error \
border-left-color: red;\
color: red;\
\
.counter.warning \
border-left-color: orange;\
color: orange;\
\
.counter.success \
border-left-color: green;\
color: green;\
\
.badge-table \
width: 100%;\
/*border-bottom\: 5px solid #ef5114;*/\
\
/*.badge-table tbody tr td \
padding: padding: 5px 3px;\
*/\
.datacorrente-table \
width: 100%;\
/*border-bottom\: 5px solid #ef5114;*/\
\
.datacorrente-table tbody tr td \
padding-top: 5px;\
padding-right: 5px;\
padding-left: 5px;\
padding-bottom: 10px;\
width: 25%\
\
.badge-title \
font-size: 2em;\
vertical-align: middle;\
width: 100%;\
\
.template-div \
display: inline-block;\
border-radius: 6px;\
color: #ffffff;\
text-align: left;\
\
.padder-div \
padding-left: 10px;\
padding-right: 10px;\
\
.column-left \
width: 49.5%;\
float: left;\
display: inline-block;\
\
.column-right \
width: 49.5%;\
float: right;\
display: inline-block;\
\
.label-left\
padding-left: 10px;\
font-size: 15px;\
display: inline-block;\
\
.label-right\
padding-right: 10px;\
font-size: 15px;\
float: right;\
\
.dashboard-divider\
padding-left: 10px;\
padding-right: 10px;\
\
#title-card \
width: 100%;\
background-color: rgb(158, 158, 158);\
border-width: 1px;\
text-align: center;\
\
#table-div\
width: 100%;\
border-width: 1px;\
text-align: center;\
\
td \
padding: 5px 5px 5px 5px;\
\
';
UPDATE我修改了javascript，但是窗口变得非常缓慢：（
window.addEventListener('resize', function(event)
resetTable();
resizeTable();
);
function resetTable()
console.log('Rows: ' + document.getElementById("table").rows.length);
var table = document.getElementById("table");
var row, n, column, m;
for (row = 0, n = table.rows.length; row < n; row++)
for (column = 0, m = table.rows[row].cells.length; column < m; column++)
console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
table.rows[row].getElementsByClassName("card")[column].style.minHeight = 'auto';
function resizeTable()
console.log('Rows: ' + document.getElementById("table").rows.length);
var table = document.getElementById("table");
var row, n, column, m, mColumn, t;
var maxOffSet = 0;
for (row = 0, n = table.rows.length; row < n; row++)
for (column = 0, m = table.rows[row].cells.length; column < m; column++)
console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
if (maxOffSet < table.rows[row].getElementsByClassName("card")[column].offsetHeight)
maxOffSet = table.rows[row].getElementsByClassName("card")[column].offsetHeight;
for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++)
// var t = maxOffSetRow - table.rows[row].getElementsByClassName("card")[mColumn].offsetHeight;
table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = maxOffSet + 'px';
table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = 'auto';
UPDATE没关系，我已经评论了console.log的输出，它的工作原理很吸引人。因此，请自己解决：D
答案
我自己找到了解决方案：基本上，我引入了一个将最大OffsetHeight存储在行中的数组，然后将其应用于所有div.card，完成该行的清理后，他就可以为新行ecccetera填充数据。 ..
JS
window.addEventListener('resize', function(event)
resetTable();
resizeTable();
);
function resetTable()
var table = document.getElementById("table");
var row, n, column, m;
for (row = 0, n = table.rows.length; row < n; row++)
for (column = 0, m = table.rows[row].cells.length; column < m; column++)
//console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
table.rows[row].getElementsByClassName("card")[column].style.minHeight = 'auto';
function resizeTable()
//console.log('Rows: ' + document.getElementById("table").rows.length);
var table = document.getElementById("table");
var row, n, column, m, mColumn, t, arr = [];
for (row = 0, n = table.rows.length; row < n; row++)
for (column = 0, m = table.rows[row].cells.length; column < m; column++)
//console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
arr.push(table.rows[row].getElementsByClassName("card")[column].offsetHeight);
for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++)
//console.log('Row: ' + [row] + ' Column:' + [mColumn] + ' clHeight: ' + Math.max.apply(Math, arr));
table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = Math.max.apply(Math, arr) + 'px';
arr = [];
以上是关于JavaScript：如何调整div.card的大小的主要内容，如果未能解决你的问题，请参考以下文章