DIV 元素的移动

给 DIV 元素一个新的地址在两种浏览器上是没有区别的. 移动一个名字为 myelement 的元素到新的位置 (100, 50), 你只要变换这个元素有关性质的值就行了.

  myelement.left = 100
  myelement.top = 50

但你可别忘记了这个 myelement 是一个通用指针. 它是这样得到的.

  function init() {
	if (ns4) myelement = document.myelementDiv
	if (ie4) myelement = myelementDiv.style
  }

从现在开始我们不再重复了, 在以后的课文中我们老要用到它.

尽管改变元素的位置没有兼容问题, 但得到元素的当前的位置还是有点儿不一样的. 这是因为 IE 储存元素位置的时候总在值的后面加 "px". 我们可用如下方法处理

假如你想得到

  myelement.left

你最好写成

  parseInt(myelement.left)

比如你想把元素的左和上的位置用一个预警 (alert) 窗口告诉大家

alert(parseInt(myelement.left)+", "+parseInt(myelement.top))

给元素加新的性质

每次都写 parseInt() 好象挺烦的. 有没有好点儿的办法呢? 其实一个简单的办法就是把它记住. JavaScript 可以让你无限制的给元素添加新的性质. 比如, 我们把元素当前的位置记在如下两个新的性质xpos, ypos 里

  myelement.xpos = parseInt(myelement.left)
  myelement.ypos = parseInt(myelement.top)

这样, 以后你想要知道元素的位置, 只要看 xpos 和 ypos 就行了. 比如

  alert(myelement.xpos + "," + myelement.ypos)

通用移动子程序

下面这个子程序用来移动一个元素到位置 (x, y)

moveTo() Function

  function moveTo(obj,x,y) {
	obj.xpos = x
	obj.left = obj.xpos
	obj.ypos = y
	obj.top = obj.ypos
  }

这个子程序用起来很容易, 你仅仅需要告诉他 layer 的指针名字和新的位置 x, y 就行了. 比如你有如下的 layer 指针

  if (ns4) mysquare = document.mysquareDiv
  if (ie4) mysquare = mysquareDiv.style
  mysquare.xpos = parseInt(mysquare.left)
  mysquare.ypos = parseInt(mysquare.top)

如果你要把它移动到一个新的地址 (50, 100), 你可以用如下的语句完成.

  moveTo(mysquare,50,100)

moveBy() Function

这个子程序跟 moveTo() 的区别在于它是把 layer 相对于当前的位置 x, y而不是窗口的坐标 x, y.

  function moveBy(obj,x,y) {
	obj.xpos += x
	obj.left = obj.xpos
	obj.ypos += y
	obj.top = obj.ypos
  }

比如把上述元素往右边移动 5 pixels 和往上移动 10 pixels. 你可以写出

  moveBy(mysquare,5,-10)