將球放置在場地中央
重要性:5
以下是原始文件的外觀
場地中央的座標為何?
計算座標並使用座標將球放置在綠色場地的中央
- 元素應由 JavaScript 移動,而非 CSS。
- 程式碼應適用於任何球的大小(
10
、20
、30
像素)和任何場地的尺寸,不受給定值約束。
附註:當然,可以使用 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;
}