jquery：在给定文本更改的情况下维护相同的按钮大小

Question

I have the following piece of code: 我有以下代码：

$(document).ready(initialize);

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

When I debug it in Chrome $('#btnPoint').width() is 83 before the width is set. 当我在Chrome $('#btnPoint').width()调试它时$('#btnPoint').width()在设置宽度之前，width $('#btnPoint').width()为83。 But it becomes 67 immediately after the css statement is executed. 但是在执行css语句后它立即变为67。

What is going on? 到底是怎么回事？

EDIT 编辑

I have no particular stylesheets loaded. 我没有加载特定的样式表。 Here is my html page: 这是我的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's width() doesn't contain padding or border which are default styles on a button use outerWidth() like: jQuery的width()不包含填充或边框，它们是button上的默认样式，使用outerWidth()如：

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

to keep your button the same size, but have the text morph to fit, check out the fitText plugin or fitText on github it's made for large display text, but might work for your needs. 保持你的按钮大小相同，但文本变形适合，检查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