Javascript 边框和填充宽度

更新：编辑的javascript代码。现在在一些专栏中，它只是稍微偏离了一点。也许一两个像素。不知道为什么。

我需要得到表格单元格的边框和内部填充宽度。我计划从offsetWidth中减去这些值以获得内容宽度，并使用该值设置另一个单元格的style.width。不幸的是，我找不到一个行之有效的方法来获得边框和填充宽度。有人有主意吗

更新：我添加了下面的代码来显示我的实现。它仍然没有正确对齐。 我试图同步两个表的列宽；但是，表的宽度设置小于所有列的长度，导致某些列无法对齐。 桌子宽度设置得太小：(

/*
Utilities.js
作者：Steven T.Norris创作日期：2012年3月2日
更新人：上次更新：
版权所有2012
效用函数
如果在HtmlLoggerControlInstance中使用debug.aspx或名为“debug”的记录器，则记录到调试窗口
*/
/*
在两个表之间同步列大小。
@参数字符串table1:要同步的第一个表
@param int table1headlow：用作表1列宽同步的行（如果为null，则使用第一行）
@参数字符串表2：要同步的第二个表
@param int table2headlow：用作表2列宽同步的行（如果为null，则使用第一行）
*/
功能同步列宽度（表1、表1净空高度、表2、表2净空高度）{
var tableTotal=0；
var tableAdd=0；
var t1width=0；
var t2width=0；
T1VAR细胞；
t2var细胞；
细胞宽度；
细胞宽度；
UtilLogger.log（htmlogger.INFO，“-同步列宽-”）
如果（（typeof table1==“string”| | table1.constructor==string）和&（typeof table2==“string”| | table2.constructor==string）
&&（Table1Headlow的类型==“数字”| | Table1Headlow==null）和&（Table2Headlow的类型==“数字”| | Table1Headlow==null））{
tableOne=document.getElementById（表1）；
tableTwo=document.getElementById（表2）；
//设置行以检查并获取行
如果（表1净空==null）{
t1Start=0；
}
否则{
t1Start=表1水头；
}
如果（表2headlow==null）{
t2Start=0；
}
否则{
t2Start=表2水头；
}
t1Row=tableOne.rows[t1Start]；
t2Row=tableTwo.rows[t2Start]；
//获取结束号
if（t1Row.cells.lengtht2CellWidth）{
tableAdd=t1width；
t2Row.cells[i].style.width=t1CellWidth+“px”；
t1Row.cells[i].style.width=t1CellWidth+“px”；
log（htmlogger.FINE，“syncColumnWidths:将t2宽度设置为t1”）；
日志（htmlogger.FINER，“syncColumnwidths:t1样式宽度：”+t1Row.cells[i].style.width+“t2样式宽度：”+t2Row.cells[i].style.width）；
}
否则{
tableAdd=t2宽度；
t1Row.cells[i].style.width=t2CellWidth+“px”；
t2Row.cells[i].style.width=t2CellWidth+“px”；
log（htmlogger.FINE，“syncColumnWidths:将t1宽度设置为t2”）；
日志（htmlogger.FINER，“syncColumnwidths:t1样式宽度：”+t1Row.cells[i].style.width+“t2样式宽度：”+t2Row.cells[i].style.width）；
}
tableTotal=tableTotal+tableAdd；
}
UtilLogger.log（htmlogger.FINE，“将主表宽度设置为”+tabletottal）；
tableOne.style.width=tableTotal+“px”
tableTwo.style.width=tableTotal+“px”
log（htmlogger.FINER，“tableOne宽度：”+tableOne.style.width）；
log（htmlogger.FINER，“tableTwo宽度：”+tableTwo.style.width）；
}
否则{
警报（“syncColumnWidths接受参数（string，int | null，string，int | null）”）；
}
UtilLogger.log（htmlogger.INFO，“-同步列宽完成-”；
}

如果您有此表

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

在这里拉小提琴

试试这个：

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

---

借用自。

您愿意使用jQuery吗？@ElliotBonneville您在jQuery中所做的一切都可以在纯文本中完成javascript@ElliotBonneville我愿意使用任何可以完成任务的东西。尽管javascript可以做jQuery可以做的任何事情，但鉴于它本身就是javascript，jQuery通常会以更少的麻烦和更多的乐趣来完成它。：）正如您所见，在这种情况下，jQuery将为您做大量工作。@NicolaPeluchetti若并没有定义内联样式该怎么办？说外部CSS或根本没有CSS。这仍然会得到正确的值吗？@steventnorris在这种情况下，当您对jQuery开放时，请使用jQuery

$（“#my”）。css（'padding-left'）

将执行此操作trick@NicolaPeluchetti谢谢你，我来试一试then@NicolaPeluchetti我似乎仍然有宽度问题。我在上面添加了我的代码作为参考。和Nicola的问题一样，如果CSS

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

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