Вернуться к уроку

Поместите мяч в центр поля

важность: 5

При абсолютном позиционировании мяча внутри поля его координаты left/top отсчитываются от внутреннего угла поля, например верхнего-левого:

Метрики для внутренней зоны поля – это clientWidth/Height.

Центр – это (clientWidth/2, clientHeight/2).

Но если мы установим мячу такие значения ball.style.left/top, то в центре будет не сам мяч, а его левый верхний угол:

var ball = document.getElementById('ball');
var field = document.getElementById('field');

ball.style.left = Math.round(field.clientWidth / 2) + 'px';
ball.style.top = Math.round(field.clientHeight / 2) + 'px';

Для того, чтобы центр мяча находился в центре поля, нам нужно сместить мяч на половину его ширины влево и на половину его высоты вверх.

var ball = document.getElementById('ball');
var field = document.getElementById('field');

ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';

Внимание, подводный камень!

Код выше стабильно работать не будет, потому что IMG идет без ширины/высоты:

<img src="ball.png" id="ball">

Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.

После первой загрузки изображение уже будет в кеше браузера, и его размеры будут известны. Но когда браузер впервые видит документ – он ничего не знает о картинке, поэтому значение ball.offsetWidth равно 0. Вычислить координаты невозможно.

Чтобы это исправить, добавим width/height к картинке:

<img src="ball.png" width="40" height="40" id="ball">

Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.

Открыть решение в песочнице.

Поместите мяч в центр поля.

Исходный документ выглядит так:

Используйте JavaScript, чтобы поместить мяч в центр:

  • Менять CSS нельзя, мяч должен переносить в центр ваш скрипт, через установку нужных стилей элемента.
  • JavaScript-код должен работать при разных размерах мяча (10, 20, 30 пикселей) без изменений.
  • JavaScript-код должен работать при различных размерах и местоположениях поля на странице без изменений. Также он не должен зависеть от ширины рамки поля border.

P.S. Да, центрирование можно сделать при помощи чистого CSS, но задача именно на JavaScript. Далее будут другие темы и более сложные ситуации, когда JavaScript будет уже точно необходим, это – своего рода «разминка».

Открыть песочницу для задачи.