javascript - 为什么将'1'添加到javascript中的变量添加'3'

Question

我刚刚创建了两个简单的函数，将它们链接到 HTML 页面上两个按钮的 onClick 属性。

一个函数查找 div 的宽度，然后它应该只添加“1”，但它会添加“3”。另一个函数查找 div 的宽度，然后它应该减去“1”。它没有这样做，而是添加了“1”

有人可以启发我为什么会发生这种情况并告诉我纠正这个问题吗？

function bigger() {
    var div_kubus = document.getElementById('kubus');
    var x = div_kubus.offsetWidth;
    var y = parseInt(x) + 1;
    var tekst = document.getElementById('tekst');
    tekst.value = y;
    div_kubus.style.width = y + 'px';
    /*div_kubus.setAttribute('style','width:'+y+'px');*/
}

function smaller() {
    var div_kubus = document.getElementById('kubus');
    var x = div_kubus.offsetWidth;
    var tekst = document.getElementById('tekst');
    x -= 1;
    div_kubus.setAttribute("style", "width:" + x + "px");
    tekst.value = x;
}

Answer 1

.offsetWidth将返回包括边框和填充的宽度：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetWidth

所以我假设你可能有一个 1px 的边框（或填充），它为你的预期宽度增加了 2（左边 1px，右边 1px）。因此，加1，加3；减1，加1。