返回課程

將球放置在場地中央

重要性:5

以下是原始文件的外觀

場地中央的座標為何?

計算座標並使用座標將球放置在綠色場地的中央

  • 元素應由 JavaScript 移動,而非 CSS。
  • 程式碼應適用於任何球的大小(102030 像素)和任何場地的尺寸,不受給定值約束。

附註:當然,可以使用 CSS 置中,但我們在此特別需要使用 JavaScript。稍後我們會遇到其他主題和更複雜的情況,必須使用 JavaScript。我們在此進行「熱身運動」。

為任務開啟沙盒。

球有 position:absolute。這表示其 left/top 座標會從最近定位的元素測量,也就是 #field(因為它有 position:relative)。

座標從場地的內部左上角開始。

內部場地寬度/高度為 clientWidth/clientHeight。因此,場地中心座標為 (clientWidth/2, clientHeight/2)

…但是,如果我們將 ball.style.left/top 設定為這些值,則不會是整個球,而是球的左上角會在中心。

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

以下是它的外觀

若要將球中心與場地中心對齊,我們應將球向左移動其寬度的一半,並向上移動其高度的一半。

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">

當瀏覽器不知道影像的寬度/高度(來自標籤屬性或 CSS)時,它會假設它們等於 0,直到影像載入完成。

因此,在影像載入之前,ball.offsetWidth 的值會是 0。這會導致上述程式碼中的座標錯誤。

在第一次載入後,瀏覽器通常會快取影像,而在重新載入時,它會立即擁有大小。但在第一次載入時,ball.offsetWidth 的值是 0

我們應透過將 width/height 新增至 <img> 來修正這個問題。

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

…或在 CSS 中提供大小。

#ball {
  width: 40px;
  height: 40px;
}

在沙盒中開啟解決方案。