边框和内边距宽度 javascript

Question

更新：编辑了 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-");
}

Answer 1

如果你有这张表，

<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/

Answer 2

试试这个：

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

借用这个答案。