0

HTML ページの 2 つのボタンの onClick プロパティにリンクする 2 つの単純な関数を作成しました。

1 つの関数が div の幅を調べ、「1」を追加するだけでよいのですが、代わりに「3」を追加します。もう 1 つの関数は 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;
}
4

1 に答える 1

4

.offsetWidthボーダーとパディングを含む幅を返します。

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

したがって、予想される幅に 2 を追加する 1 ピクセルの境界線 (またはパディング) がおそらくあると想定しています (左は 1 ピクセル、右は 1 ピクセル)。したがって、1 を追加すると 3 が追加されます。1 を引いて 1 を足します。

于 2013-11-13T20:44:06.840 に答える