使用JS获取按钮的宽度？

Question

我在 index.html 中有一个按钮，它是在 html 文件而不是 javascript 文件中创建的。我正在尝试使用纯 JavaScript 获取按钮的宽度。我没有使用 jQuery，也不会选择任何其他 JS 库。我尝试过的：

  function resizeButtom() {
        var btn = document.getElementById('btn-resize-me');
        alert(btn.style.width); // alerts blank
        alert(parseInt(btn.style.width); // alerts NaN, because the value is a blank
        btn.style.width = toString(parseInt(btn.style.width) - 20) + "px"; // does not work!
    }

<button id="btn-resize-me" onClick="resizeButton();"></button>

样式表.css

.menu-btn {
    background-color: #F3F2F1;
    border: none;
    color: black;
    padding: 7px 12px 7px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 20px;
    float: left;
    height: 100%;
    width:auto;
}

我无法设置按钮宽度，因为它是浏览器上加载的字体宽度（默认字体可能不会在特定浏览器上加载）与左侧和右侧 14px、7px 填充的总和。

动机： 当我按下一个按钮时，我希望另一个按钮获得 1px 纯黑色的边框。这是完美的，但是由于边框，按钮的宽度大了 2px，将其他菜单项按钮移动了 2px，这看起来很奇怪。我虽然将更改后的按钮（现在带有边框：1px 纯黑色；）调整为 2px 可以解决这个问题。答案提供了一种调整大小的方法，但它是近似的，导致新的大小，保持填充，看起来不自然和丑陋。

Answer 1

您可以使用 offsetWidth 检索它，也可以设置不需要的 btn 的宽度 toString ： 更新：添加了更改按钮的字体大小。

function resizeButton() {
        var btn = document.getElementById('btn-resize-me');
        alert(parseInt(btn.offsetWidth)); 
        btn.style.width = (parseInt(btn.offsetWidth) - 20)+"px";  btn.style.fontSize = "12px";
 alert(parseInt(btn.style.width)); 
    }

#btn-resize-me {
    background-color: #F3F2F1;
    border: 1ox solid gray;;
    color: black;
    padding: 7px 12px 7px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 20px;
    float: left;
    height: 100%;
    width:auto;
}

<button id="btn-resize-me"  onClick="resizeButton()">hello</button>

Answer 2

function resizeButton() {
    var btn = document.getElementById('btn-resize-me');
    alert(btn.offsetWidth); // alerts 
    btn.style.width = Math.max(btn.offsetWidth - 20, 0) + "px"; // works
    //the width is reduced by about 20, until it can't
}

<button id="btn-resize-me" onClick="resizeButton();" style="width: auto; overflow: hidden;">Some Text</button>