精通JavaScript源码2
// Find the left position of an elementfunction 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 elementfunction 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) return elem.style; //IE中的方法 else if (elem.currentStyle) return elem.currentStyle; // W3C的方法 else if (document.defaultView && document.defaultView.getComputedStyle) { // It uses the traditional ‘text-align’ style of rule writing, instead of textAlign name = name.replace(/()/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 elementfunction 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 elementfunction 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 parentfunction 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 parentfunction 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 elementfunction 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 elementfunction 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 elementfunction 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 elementfunction 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 elementfunction 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 elementfunction 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 elementfunction 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 laterfunction 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; } // Retun the set of changed values, to be used by restoreCSS return old;}// A function for restoring the side effects of the resetCSS functionfunction restoreCSS( elem, prop ) { // Reset all the properties back to their original values for ( var i in prop ) elem.style[ i ] = prop[ i ];
页:
[1]