Границы и отступы ширины JavaScript - PullRequest
Новая
       28

Границы и отступы ширины JavaScript

1 голос
/ 23 марта 2012

ОБНОВЛЕНИЕ: отредактированный код JavaScript. В некоторых колонках сейчас только немного. Может быть, пиксель или два. Не уверен, почему.

Мне нужно получить границу и ширину внутреннего отступа ячейки таблицы. Я планирую вычесть эти значения из offsetWidth, чтобы получить ширину содержимого, и использовать это, чтобы установить style.width другой ячейки. К сожалению, я не могу найти проверенный способ получения границы и ширины отступов. У кого-нибудь есть идея?

ОБНОВЛЕНИЕ: я добавил код ниже, чтобы показать мою реализацию. Это все еще не выравнивается правильно. Я пытаюсь синхронизировать ширину столбцов двух таблиц; однако ширины таблицы устанавливаются меньше, чем длина всех столбцов, поэтому некоторые столбцы не совпадают. Ширина таблицы слишком мала. (

/*
Utilities.js
Author: Steven T. Norris     Created: 3/2/2012
Updated By:                  Last Updated:
Copyright 2012

Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/

/*
Syncs column sizes between two tables. 

@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow, table2, table2HeadRow) {
    var tableTotal = 0;
    var tableAdd = 0;
    var t1width = 0;
    var t2width = 0;
    var t1Cell;
    var t2Cell;
    var t1CellWidth;
    var t2CellWidth;
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
    if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
        && (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
        tableOne = document.getElementById(table1);
        tableTwo = document.getElementById(table2);

        //Set row to check and get row
        if(table1HeadRow == null){
            t1Start = 0;
        }
        else{
            t1Start = table1HeadRow;
        }
        if(table2HeadRow == null){
            t2Start = 0;
        }
        else{
            t2Start = table2HeadRow;
        }
        t1Row = tableOne.rows[t1Start];
        t2Row = tableTwo.rows[t2Start];

        //Get end number
        if(t1Row.cells.length < t2Row.cells.length){
            tEnd = t1Row.cells.length;
        }
        else{
            tEnd = t2Row.cells.length;
        }


        //Sync widths
        for (i = 0; i < tEnd; i++) {
            t1Cell = $("#" + table1+" tr:eq("+t1Start+") td:eq("+i+")");
            t1width = t1Cell.width() + parseInt(t1Cell.css("padding-left"), 10) + parseInt(t1Cell.css("padding-right"), 10)
                      + parseInt(t1Cell.css("borderLeftWidth"), 10) + parseInt(t1Cell.css("borderRightWidth"), 10) ;
            t1CellWidth = t1Cell.width();
            t2Cell = $("#" + table2 + " tr:eq(" + t1Start + ") td:eq(" + i + ")");
            t2width = t2Cell.width() + parseInt(t2Cell.css("padding-left"), 10) + parseInt(t2Cell.css("padding-right"), 10)
                      + parseInt(t2Cell.css("borderLeftWidth"), 10) + parseInt(t2Cell.css("borderRightWidth"), 10);
            t2CellWidth = t2Cell.width();
            UtilLogger.log(HtmlLogger.CONFIG, "syncColumnWidths:t1 width:" + t1CellWidth + "   t2 width:" + t2CellWidth);
            if (t1CellWidth > t2CellWidth) {
                tableAdd = t1width;
                t2Row.cells[i].style.width = t1CellWidth + "px";
                t1Row.cells[i].style.width = t1CellWidth + "px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
                UtilLogger.log(HtmlLogger.FINER, "syncColumnwidths:t1 style width:" + t1Row.cells[i].style.width + "    t2 style width:" + t2Row.cells[i].style.width);

            }
            else {
                tableAdd = t2width;
                t1Row.cells[i].style.width = t2CellWidth + "px";
                t2Row.cells[i].style.width = t2CellWidth + "px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
                UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+"    t2 style width:"+t2Row.cells[i].style.width);

            }
            tableTotal = tableTotal + tableAdd;
        }
        UtilLogger.log(HtmlLogger.FINE, "setting main table width to " + tableTotal);
        tableOne.style.width = tableTotal + "px"
        tableTwo.style.width = tableTotal + "px"
        UtilLogger.log(HtmlLogger.FINER, "tableOne width: " + tableOne.style.width);
        UtilLogger.log(HtmlLogger.FINER, "tableTwo width: " + tableTwo.style.width);

    }
    else{
        alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
    }
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}

Ответы [ 2 ]

2 голосов
/ 23 марта 2012

Если у вас есть эта таблица 

<table>
    <tr>
        <td id="my" style="padding: 5px; border:3px;"></td>
    </tr>
</table>

, вы можете сделать 

 var padding = document.getElementById('my').style.padding;
 var border = document.getElementById('my').style.border;

скрипку здесь http://jsfiddle.net/7TmXm/

1 голос
/ 23 марта 2012

Попробуйте это: 

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

Заимствовано из этого ответа .

...