[英]JavaScript: how to resize div.card
對不起我的英語不好，希望你能理解我有什么樣的問題。 所以，這里是代碼，它的作用是調整 div.cards 的大小。 我的意思是，當我在全屏上顯示 window 時，表格正確顯示了 div.cards。 因此，當我開始更改 window 的大小時，其中一些卡片會更改某些行中的 offsetHeight（始終取決於它們上的文本）。 我附上了我的桌子的圖像（非全屏窗口）。 所以，正如你所看到的，當我改變我的 window 時，卡片被改變了 offsetHeight 所以，我已經實現的是將相同的高度應用於該行中最高 div.card 的所有 div.cards。 我仍然卡住的地方是：當我將 window 返回到全屏時，那些 div.cards 應該 go 回到原來的 offsetHeight，但仍然無法理解如何做到這一點。
我已經嘗試過，例如將所有 div.cards 的 offsetHeight 放入數組中，然后以某種方式恢復它們，但沒有成功。 我的桌子
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;\
}\
';
更新我修改了 javascript，但是 window 變得非常滯后：（
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';
}
}
}
更新沒關系，我評論了我的 console.log 輸出，它就像一個魅力。 所以自己解決：D
我自己找到了解決方案：基本上我引入了一個數組，該數組將最大 OffsetHeight 存儲在行中，然后將其應用於所有 div.cards，完成該行后，它會進行清理，這樣他就可以為新行填充數據 eccetera ...
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 = [];
}
}
我試圖讓它只在 div.card-title 而不是孔 div.card 上打開（CodePen Home 3D 折疊顯示）
[英]Im trying to make it so the card only opens on the div.card-title instead of the hole div.card (CodePen Home 3D Fold out reveal)
如何在使用javascript調整大小時自動更改div高度？
[英]How can I change div height automatically on resize with javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.