按钮文本更改时保持按钮大小稳定答案

【问题标题】：Keep size of button stable when button text changes按钮文本更改时保持按钮大小稳定
【发布时间】：2019-09-15 13:56:09
【问题描述】：

我有一个bootstrap 按钮：

<div class="float-right" >
    <label>show as </label>
    <input class="btn btn-outline-primary rounded active" type="button" value="percentage" onclick="toggle(this)" />
</div>

我使用以下方式切换文本：

<script type="text/javascript">
    function toggle(button) {
        if(button.value=="percentage") {
            button.value="units";
        } else {
            button.value="percentage";
        }
    }
</script>

当文本从较长的单词 percentage 更改为较短的单词 units 时，如何获得按钮不调整大小。即，我希望按钮保持与具有文本 percentage 时相同的大小。

请注意，我宁愿不使用 style="min-width: 120px;" 对大小进行硬编码。

【问题讨论】：

相关：stackoverflow.com/a/55328972/8620333（如果您能够使用button insitead of input）

标签： html css twitter-bootstrap button resize

【解决方案1】：

我建议使用javascript。

其中一个选项：

<div class="float-right" >
    <label>show as </label>
    <input class="btn btn-outline-primary rounded active" type="button" value="percentage" onclick="toggle(this)" />
</div>
<script type="text/javascript">
    function toggle(button) {
        const buttonWidth = button.offsetWidth;
        if(button.value=="percentage") {
            button.value="units";
            button.style.width = `${buttonWidth}px`;
        } else {
            button.value="percentage";
        }
    }
</script>

【讨论】：