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