gpt4 book ai didi

javascript - jquery:在给定文本更改的情况下保持相同的按钮大小

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:49:53 25 4
gpt4 key购买 nike

我有以下代码:

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

最佳答案

jQuery 的 width()不包含填充或边框,它们是 button 上的默认样式使用 outerWidth()喜欢:

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

要保持您的按钮大小相同,但要使文本变形以适合,请查看 fitText pluginfitText on github它专为大显示文本而设计,但可能会满足您的需求。

关于javascript - jquery:在给定文本更改的情况下保持相同的按钮大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9930549/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com