边框和填充宽度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

试试这个：

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 

借用this answer。

Answer 2

如果您有此表

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