精通JavaScript源码2

// 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” ) );
}

 

获取style指定elem的值:

function getStyle( elem, name ) {
    if (elem.style[name])
        return elem.style[name];
     //IE中的方法
    else if (elem.currentStyle)
        return elem.currentStyle[name];
    // W3C的方法
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        // It uses the traditional ‘text-align’ style of rule writing, instead of textAlign
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        // Get the style object and get the value of the property (if it exists)
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    } else
        return null;
}

找到elem在页面中水平X（left），垂直Y的值（top），offsetLeft方法在不同的浏览器有所不同。

// Find the X (Horizontal, Left) position of an element
function pageX(elem) {
    var p = 0;
    // We need to add up all of the offsets for every parent
    while ( elem.offsetParent ) {
        // Add the offset to the current count
        p += elem.offsetLeft;
        // and continue on to the next parent
        elem = elem.offsetParent;
    }
    return p;
}
// Find the Y (Vertical, Top) position of an element
function pageY(elem) {
    var p = 0;
    // We need to add up all the offsets for every parent
    while ( elem.offsetParent ) {
        // Add the offset to the current count
        p += elem.offsetTop;
        // and continue on to the next parent
        elem = elem.offsetParent;
    }
    return p;
}

  找到elem距离去父元素的位置：

// Find the horizontal positioing 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 positioing 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 );
}

 找到elem中style中left，top的值：

// 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” ) );
}

 设置elem left，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 ‘left’ 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( 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( posY(elem) + pos );
}

  获得元素的width，height，隐藏的元素是不可以获得width和height，可以用fullHeight，fullWidth实现：

// Get the actual height (using the computed CSS) of an element
function getHeight( elem ) {
    // Gets the computed CSS value and parses out a usable number
    return parseInt( getStyle( elem, ‘height’ ) );
}
// Get the actual width (using the computed CSS) of an element
function getWidth( elem ) {
    // Gets the computed CSS value and parses out a usable number
    return parseInt( getStyle( elem, ‘width’ ) );
}

// Find the full, possible, height of an element (not the actual,
// current, height)
function fullHeight( elem ) {
    // If the element is being displayed, then offsetHeight
    // should do the trick, barring that, getHeight() will work
    if ( getStyle( elem, ‘display’ ) != ‘none’ )
        return elem.offsetHeight || getHeight( elem );

    // Otherwise, we have to deal with an element with a display
    // of none, so we need to reset its CSS properties to get a more
    // accurate reading
    var old = resetCSS( elem, {
        display: ‘’,
        visibility: ‘hidden’,
        position: ‘absolute’
    });

    // Figure out what the full height of the element is, using clientHeight
    // and if that doesn’t work, use getHeight
    var h = elem.clientHeight || getHeight( elem );

    // Finally, restore the CSS properties back to what they were
    restoreCSS( elem, old );

    // and return the full height of the element
    return h;
}

// Find the full, possible, width of an element (not the actual,
// current, width)
function fullWidth( elem ) {
    // If the element is being displayed, then offsetWidth
    // should do the trick, barring that, getWidth() will work
    if ( getStyle( elem, ‘display’ ) != ‘none’ )
        return elem.offsetWidth || getWidth( elem );
    // Otherwise, we have to deal with an element with a display
    // of none, so we need to reset its CSS properties to get a more
    // accurate reading
    var old = resetCSS( elem, {
        display: ‘’,
        visibility: ‘hidden’,
        position: ‘absolute’
    });
    // Figure out what the full width of the element is, using clientWidth
    // and if that doesn’t work, use getWidth
    var w = elem.clientWidth || getWidth( elem );
    // Finally, restore the CSS properties back to what they were
    restoreCSS( elem, old );
    // and return the full width of the element
    return w;
}
// A function used for setting a set of CSS properties, which
// can then be restored back again later
function resetCSS( elem, prop ) {
    var old = {};
    // Go through each of the properties
    for ( var i in prop ) {
        // Remember the old property value
        old[ i ] = elem.style[ i ];
        // And set the new value
        elem.style[ i ] = prop[i];
    }
    // Retun the set of changed values, to be used by restoreCSS
    return old;
}
// A function for restoring the side effects of the resetCSS function
function restoreCSS( elem, prop ) {
    // Reset all the properties back to their original values
    for ( var i in prop )
        elem.style[ i ] = prop[ i ];