我正在尝试更改按钮的宽度以匹配 jquery 中按钮上方文本框的宽度。我尝试使用以下行来完成此操作:
$("#myButton").css("width", $("#textbox").width());
在下面的代码中:
JQuery:
$('#tabs').tabs();
$("#myButton").css("width", $("#textbox").width());
HTML:
<div id="tabs">
<ul>
<li><a href="#tabs-1"> Tab 1</a></li>
<li><a href="#tabs-2" id="productTab">Tab 2</a></li>
</ul>
<div id="tabs-1" class="buttons" class="ui-widget">
</div>
<div id="tabs-2">
<table>
<tr>
<td>
<input type="text" id="textbox" />
</td>
</tr>
<tr>
<td>
<button id="myButton">My Button
</button>
</td>
</tr>
</table>
</div>
</div>
我相信,由于我使用的是选项卡,文本框的宽度不会立即可用。
最佳答案
问题是因为文本框是隐藏的(在未显示的选项卡中),因此无法计算它的宽度。解决方法是克隆元素,追加它,然后获取它的宽度,最后将它从 DOM 中删除。
$('#tabs').tabs();
var $textboxClone = $('#textbox').clone().appendTo('#tabs');
$("#myButton").css("width", $textboxClone.width());
$textboxClone.remove();
注意;这里宽度的微小差异是由于填充和/或边距差异造成的,我将让您在 CSS 中解决这些差异。
关于jquery - 改变jquery中按钮的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17343625/