Я только что сделал две простые функции, которые я связал с свойством onClick двух кнопок на странице HTML.
Одна функция просматривает ширину 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;
}
.offsetWidth
вернет ширину, включая границы и отступы:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetWidth
Поэтому я предполагаю, что вы, вероятно, получили 1px границу (или дополнение), которая добавляет 2 к вашей ожидаемой ширине (1px для левой, 1px для правой). Поэтому добавление 1 добавляет 3; и вычитание 1, добавляет 1.
x = 2; x = x + 1; alert(x)
(x равен 3, на случай, если возникли какие-либо сомнения). Я подозреваю, что 2 добавляется где-то какx + 1 + 2 = x + 3
иx - 1 + 2 = x + 1
.