精通javascript:元素的尺寸

 找出元素的高度和宽度可以很容易，也可以很困难，取决于他所处的不同场合。在大多数情况下，仅仅需要使用getStyle函数的修改版本就可以得到当前元素的高度和宽度。

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

 当你试图做如下2件事情时，会出现问题：

1.需要获取预定义高度元素的完整高度，比如，以0像素开始的动画，但你需要事先知道元素究竟能有多高或多宽。

2.当元素的display为none时，你得不到这个数值。

 当需要执行动画的时候这两个问题就会发生。一个对象的动画从0像素开始（也可能是display是none），你需要把高度增加到他的

潜在尺寸。

  代码清单展示了如何找到元素的潜在的完整高度和宽度。这需要通过访问clientWidth和clientHeight属性来实现，他们提供了元素可能达到的总尺寸。

 

// 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 ];
}