jquery的：保持相同的按鈕的大小給定的變化在文本

我有以下的代碼：jquery的：保持相同的按鈕的大小給定的變化在文本

$(document).ready(initialize); 

function initialize() { 
    $('#btnPoint').css('width', $('#btnPoint').width()); 
}

當調試它在Chrome $('#btnPoint').width()是83設置寬度之前。但在css語句執行後，它立即變爲67。

這是怎麼回事？

編輯

我裝沒有特別的樣式表。這裏是我的html頁面：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=bla-bla-bla&sensor=false&libraries=geometry"> 
    </script> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="sdr.js"></script> 
</head> 
    <body> 
    <div style="display: table; height: 100%; width: 100%;"> 
     <div id="data" style="display: table-row; height: 20px;"> 
      <div style="display: table-cell;"> 
       <input id="btnPoint" type="button" value="Mark the point" onclick="markPoint()" /> 
       Point: <input id="txtPoint" type="text" /><br /> 
       <input id="btnPolygon" type="button" value="Mark the polygon" /> 
       Polygon:<input id="txtPolygon" type="text" /> 
      </div> 
     </div> 
     <div style="display: table-row; "> 
      <div id="map_canvas" style="display: table-cell;"></div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2012-03-29 mark

您提供的示例與更改文本無關。 – mikerobi 2012-03-29 17:43:08

嘗試'$（'＃btnPoint'）。width（$（'＃btnPoint'）。width（））;' – 2012-03-29 17:43:58

你的CSS看起來像什麼？ – JKirchartz 2012-03-29 17:44:03

jQuery的width()不含填充或邊界，是在button使用outerWidth()喜歡默認樣式：

$('#btnPoint').css('width', $('#btnPoint').outerWidth());

，讓您的按鈕的大小相同，但有文字變形適合，檢查出fitText plugin或fitText on github它是用於大型顯示文字，但可能適合您的需求。

來源

2012-03-29 17:47:32 JKirchartz

我不得不承認，這很奇怪。 – mark 2012-03-29 19:04:13

jquery的：保持相同的按鈕的大小給定的變化在文本

回答

相關問題