Question

我有以下代码：

$(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>

Answer 1

jQuery的width()不包含填充或边框，它们是button使用outerWidth()的默认样式，如：

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

要保持按钮大小相同，但要将文字变形以适合，请查看为大型显示文字制作的fitText plugin或fitText on github，但可能会满足您的需求。

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

1 个答案: