为什么在javascript中为变量添加'1'添加'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。