Html 当按钮文本更改时，保持按钮大小稳定

我有一个

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>

功能切换（按钮）{
如果（按钮值=“百分比”）{
button.value=“单位”；
}否则{
button.value=“百分比”；
}
}

当文本从较长的单词

百分比更改为较短的单词
单位时，如何使按钮不调整大小。i、 e.我希望按钮保持文本
百分比
时的大小不变

注意：我不希望使用
style=“min-width:120px；”硬编码大小
我建议使用
javascript

其中一个选择：



显示为
功能切换（按钮）{
const buttonWidth=button.offsetWidth；
如果（按钮值=“百分比”）{
button.value=“单位”；
button.style.width=`${buttonWidth}px`；
}否则{
button.value=“百分比”；
}
}
相关：（如果您能够使用
按钮代替
输入
）