边框和填充宽度javascript

Posted 2023-03-06

【中文标题】边框和填充宽度javascript

【英文标题】：Border and Padding width javascript

【发布时间】：2012-04-08 04:18:20

【问题描述】：

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

【问题讨论】：

你愿意使用 jQuery 吗？

@ElliotBonneville 在 jQuery 中所做的一切都可以在纯 javascript 中完成

@ElliotBonneville 我愿意使用任何可以完成工作的方法。尽管 javascript 可以做 jQuery 可以做的任何事情，但鉴于它本身就是 javascript，jQuery 通常会更轻松、更有趣地做到这一点。 :)

【参考方案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/

【讨论】：

***.com/a/349395/339852 如您所见，在这种情况下，jQuery 将为您完成很多工作。

@NicolaPeluchetti 如果没有定义内联样式怎么办？说外部 CSS 或根本没有 CSS。这仍然会得到正确的值吗？

@steventnorris 在这种情况下，当你对 jQuery 持开放态度时，使用 jQuery $('#my').css('padding-left') 就可以了

@NicolaPeluchetti 谢谢你，我会试一试

@NicolaPeluchetti 我似乎仍然有宽度问题。我在上面添加了我的代码以供参考。

【参考方案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

借自this answer。

【讨论】：

与 Nicola 的问题相同，如果 CSS 是外部的或根本没有 CSS，这会起作用吗？

谢谢。我会根据我的目的进行测试，看看会发生什么。

不行。仍然有一些尺寸问题。我已经在上面添加了我的代码以供实现参考。

此时只是一个勾号，所以我认为这只是一个边距或需要稍微调整的东西。谢谢。

@steventnorris：没问题，我很高兴能帮上忙。