테두리 및 안쪽 여백 너비

Question

업데이트 : 편집 된 자바 스크립트 코드. 일부 열에서는 약간 떨어져 있습니다. 어쩌면 픽셀 또는 두 가지. 이유를 모르겠다.

테이블 셀의 테두리와 내부 패딩 너비를 가져와야합니다. 이 값을 offsetWidth에서 빼서 내용 너비를 얻고 다른 셀의 style.width를 설정하는 데 사용할 계획입니다. 불행히도, 나는 테두리와 패딩 너비를 얻으려는 참되고 진실한 방법을 찾을 수 없습니다. 누구나 아이디어있어?

업데이트 : 내 구현을 보여주기 위해 아래 코드를 추가했습니다. 여전히 올바르게 정렬되지 않습니다. 두 테이블의 열 너비를 동기화하려고합니다. 그러나 테이블 너비는 모든 열의 길이보다 작게 설정되어 일부 열이 정렬되지 않도록 밀어 넣습니다. 테이블 너비가 너무 작게 설정되어 있습니다. 이 테이블

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

이있는 경우 :(

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

당신은

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

여기 바이올린 http://jsfiddle.net/7TmXm/