关于offsetWidth和offsetHeight的使用

最近在做一个贪吃蛇食物时运用了该方法，接下来看下效果图

js代码：

Food.prototype.render=function(map,window){map//参数是一个存储div盒子的一个变量，在这里作为形参将其传入进来了
					console.log(map.offsetWidth)
					console.log(map.offsetHeight)
					var x=window.getrandom.init(0,map.offsetWidth/this.width)*this.width
				    var y=window.getrandom.init(0,map.offsetHeight/this.height)*this.height
					this.x=x
					this.y=y
					var div=this.element
					div.style.left=this.x+"px"
					div.style.top=this.y+"px"
				}

css代码：.map{ width: 800px; height: 500px; background-color:gray; position: relative; }
效果图：
总结：通过控制台的输出我们可以看到关于offsetWidth和offsetHeight，其实就是获取该元素的宽度和高度。因为我在做贪吃蛇的食物时需要动态的获取灰色盒子的宽高。