邊框和填充寬度javascript

更新：編輯的JavaScript代碼。現在在一些專欄中只有略微偏離。也許是一個像素或兩個。不知道爲什麼。邊框和填充寬度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-"); 
}

來源

2012-03-23 steventnorris

你打算使用jQuery嗎？ – 2012-03-23 15:34:38

@ElliotBonneville你在jQuery中所做的一切都可以在純javascript中完成 – 2012-03-23 15:36:25

@ElliotBonneville我願意使用任何可以完成的工作。雖然JavaScript可以做任何jQuery可以做的事情，但由於它本身就是javascript本身，因此jQuery經常會用更少的麻煩和更多的樂趣來做到這一點。 :) – steventnorris 2012-03-23 15:39:40

試試這個：

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。

來源

2012-03-23 15:47:31

與Nicola相同的問題，如果CSS是外部的，或者根本沒有CSS，這個問題會起作用嗎？ – steventnorris 2012-03-23 15:55:01

是的，它會工作。 – 2012-03-23 15:55:39

謝謝。我會測試我的目的，看看會發生什麼。 – steventnorris 2012-03-23 16:01:50

如果您有此表

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

來源

2012-03-23 15:35:39

http://stackoverflow.com/a/349395/339852正如你所看到的，在這種情況下，jQuery將爲你做很多工作。 – 2012-03-23 15:38:08

@NicolaPeluchetti如果沒有定義內聯樣式，該怎麼辦？說外部CSS或根本沒有CSS。這仍然會得到正確的值嗎？ – steventnorris 2012-03-23 15:40:34

@steventnorris在這種情況下，因爲你打開jQuery，使用jQuery'$（'＃''）.css（'padding-left'）'將做詭計 – 2012-03-23 15:56:07

邊框和填充寬度javascript

回答

相關問題