jquery：在給定文本更改的情況下維護相同的按鈕大小

Question

我有以下代碼：

$(document).ready(initialize);

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

當我在Chrome $('#btnPoint').width()調試它時$('#btnPoint').width()在設置寬度之前，width $('#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>

Answer 1

jQuery的width()不包含填充或邊框，它們是button上的默認樣式，使用outerWidth()如：

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

保持你的按鈕大小相同，但文本變形適合，檢查github上的fitText插件或fitText是否為大型顯示文本，但可能適合您的需要。

jquery：在給定文本更改的情況下維護相同的按鈕大小

問題描述

1 個解決方案

解決方案1
4 已采納 2012-03-29 17:47:32

jquery：在給定文本更改的情況下維護相同的按鈕大小

問題描述

1 個解決方案

解決方案1 4 已采納 2012-03-29 17:47:32

解決方案1
4 已采納 2012-03-29 17:47:32