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