Почему добавление «1» к переменной в JavaScript добавляет «3»

0

Я только что сделал две простые функции, которые я связал с свойством 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;
}
  • 1
    Это не так. Исправьте свое утверждение: x = 2; x = x + 1; alert(x) (x равен 3, на случай, если возникли какие-либо сомнения). Я подозреваю, что 2 добавляется где-то как x + 1 + 2 = x + 3 и x - 1 + 2 = x + 1 .
  • 0
    Я думаю, что div_kubus.offsetWidth = 2 отсюда ..
Показать ещё 3 комментария
Теги:

1 ответ

4
Лучший ответ

.offsetWidth вернет ширину, включая границы и отступы:

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

Поэтому я предполагаю, что вы, вероятно, получили 1px границу (или дополнение), которая добавляет 2 к вашей ожидаемой ширине (1px для левой, 1px для правой). Поэтому добавление 1 добавляет 3; и вычитание 1, добавляет 1.

  • 0
    Я до сих пор не совсем понял, но ваша логика имеет смысл. FYI отступы и поля установлены на ноль. Реальная проблема, я думаю, я считываю offsetWidth и затем пишу в style.width. Следуя вашей логике, между этими двумя разница составляет 2 пикселя.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню