javascript与CSS复习(《精通javascript》)

2019-06-06 00:07:01王冬梅

   elem.offsetTop + pageY(elem.offsetParent) :
//otherwise, just get the current offset
elem.offsetTop;
}

我们接着要获得元素相对于它父亲的水平和垂直位置,使用元素相对于父亲的位置,就可以为DOM增加额外的元素,并相对定位于它的父亲。

//find the horizontal position of an element within its parent
function parentX(elem) {
  //if the offsetParent is the element's parent, break early
  return elem.parentNode == elem.offsetParent ?
elem.offsetLeft :
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageX(elem) - pageX(elem.parentNode);
}
//find the vertical positioning of an element within its parent
function parentY(elem) {
  //if the offsetParent is the element's parent, break early
return elem.parentNode == elem.offsetParent ?
    elem.offsetTop :
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageY(elem) - pageY(elem.parentNode);
}

元素位置的最后一个问题,获取元素当对于css定位(非static)容器的位置,有了getStyle这个问题很好解决

//find the left position of an element
function posX(elem) {
  //get the computed style and get the number out of the value
return parseInt(getStyle(elem, 'left'));
}
//find the top position of an element
function posY(elem) {
  //get the computed style and get the number out of the value
return parseInt(getStyle(elem, 'top'));
}

接着是设置元素的位置,这个很简单。

//a function for setting the horizontal position of an element
function setX(elem, pos) {
  //set the 'left' css property, using pixel units
  elem.style.left = pos + 'px';
}
//a function for setting the vertical position of an element
function setY(elem, pos) {
  //set the 'top' css property, using pixel units
  elem.style.top = pos + 'px';
}

再来两个函数,用于调准元素的当前位置,在动画效果中很实用

//a function for adding a number of pixels to the horizontal
//position of an element
function addX(elem, pos) {
  //get the current horz. position and add the offset to it
setX(elem, posX(elem) + pos);
}
//a function that can be used to add a number of pixels to the
//vertical position of an element
function addY(elem, pos) {
  //get the current vertical position and add the offset to it
setY(elem, posY(elem) + pos);
}

知道如何获取元素位置之后,我们再来看看如何获取元素的尺寸,
获取元素当前的高度和宽度

function getHeight(elem) {
  return parseInt(getStyle(elem, 'height'));
}
function getWidth(elem) {