JavaScript:如何调整div.card的大小

问题描述 投票:0回答:1

对不起,我的英语不好,希望您能理解我遇到的那种问题。因此,这是代码,它的作用是调整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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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)&nbsp;</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

javascript
1个回答
0
投票

我自己找到了解决方案:基本上,我引入了一个将最大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 = [];
            }
        }
© www.soinside.com 2019 - 2024. All rights reserved.