//获取元素的样式值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function getStyle (elem, name ) { if (elem.style [name]) { return elem.style [name]; } else if (elem.currentStyle ) { return elem.currentStyle [name]; } else if (document .defaultView && document .defaultView .getComputedStyle ) { name = name.replace (/([A-Z])/g , ”-$1 ″); name = name.toLowerCase (); var s = document .defaultView .getComputedStyle (elem,“”); return s && s.getPropertyValue (name); } else { return null } }
//获取元素相对于这个页面的x和y坐标。
1 2 3 4 5 6 function pageX (elem ){ return elem.offsetParent ?(elem.offsetLeft +pageX (elem.offsetParent )):elem.offsetLeft ; } function pageY (elem ){ return elem.offsetParent ?(elem.offsetTop +pageY (elem.offsetParent )):elem.offsetTop ; }
//获取元素相对于父元素的x和y坐标。
1 2 3 4 5 6 function parentX (elem ){ return elem.parentNode ==elem.offsetParent ?elem.offsetLeft :pageX (elem)-pageX (elem.parentNode ); } function parentY (elem ){ return elem.parentNode ==elem.offsetParent ?elem.offsetTop :pageY (elem)-pageY (elem.parentNode ); }
//获取使用css定位的元素的x和y坐标。
1 2 3 4 5 6 function posX (elem ){ return parseInt (getStyle (elem,”left”)); } function posY (elem ){ return parseInt (getStyle (elem,”top”)); }
//设置元素位置。
1 2 3 4 5 6 function setX (elem,pos ){ elem.style .left =pos+”px”; } function setY (elem,pos ){ elem.style .top =pos+”px”; }
//增加元素X和y坐标。
1 2 3 4 5 6 function addX (elem,pos ){ set (elem,(posX (elem)+pos)); } function addY (elem,pos ){ set (elem,(posY (elem)+pos)); }
//获取元素使用css控制大小的高度和宽度
1 2 3 4 5 6 function getHeight (elem ){ return parseInt (getStyle (elem,”height”)); } function getWidth (elem ){ return parseInt (getStyle (elem,”width”)); }
//获取元素可能,完整的高度和宽度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function getFullHeight (elem ) { if (getStyle (elem, ”display”) != ”none”) { return getHeight (elem) || elem.offsetHeight ; } else { var old = resetCss (elem, { display : ”block”, visibility : ”hidden”, position : ”absolute” }); var h = elem.clientHeight || getHeight (elem); restoreCss (elem, old); return h; } } function getFullWidth (elem ) { if (getStyle (elem, ”display”) != ”none”) { return getWidth (elem) || elem.offsetWidth ; } else { var old = resetCss (elem, { display : ”block”, visibility : ”hidden”, position : ”absolute” }); var w = elem.clientWidth || getWidth (elem); restoreCss (elem, old); return w; } }
//设置css,并保存旧的css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function resetCss (elem, prop ) { var old = {}; for (var i in prop) { old[i] = elem.style [i]; elem.style [i] = prop[i]; } return old; } function restoreCss (elem, prop ) { for (var i in prop) { elem.style [i] = prop[i]; } }
//显示和隐藏
1 2 3 4 5 6 7 8 9 10 function show (elem ){ elem.style .display =elem.$oldDisplay ||” “; } function hide (elem ){ var curDisplay=getStyle (elem,”display”); if (curDisplay!=”none”){ elem.$oldDisplay =curDisplay; elem.style .display =”none”; } }
//设置透明度
1 2 3 4 5 6 7 function setOpacity (elem,num ){ if (elem.filters ){ elem.style .filter =”alpha (opacity=”+num+”)”; }else { elem.style .opacity =num/100 ; } }
//滑动
1 2 3 4 5 6 7 8 9 10 11 function slideDown (elem ){ var h=getFullHeight (elem); elem.style .height =”0px”; show (elem); for (var i=0 ;i<=100 ;i+=5 ){ new function ( ){ var pos=i; setTimeout (function ( ){elem.style .height =(pos/100 *h)+”px”;},(pos*10 )); } } }
//渐变
1 2 3 4 5 6 7 8 9 10 11 12 function fadeIn (elem ) { show (elem); setOpacity (elem, 0 ); for (var i = 0 ; i <= 100 ; i += 5 ) { new function ( ) { var pos = i; setTimeout (function ( ) { setOpacity (elem, pos); }, (pos + 1 ) * 10 ); } } }
//获取鼠标光标相对于整个页面的位置。
1 2 3 4 5 6 7 8 function getX (e ){ e=e||window .event ; return e.pageX ||e.clientX +document .body .scrollLeft ; } function getY (e ){ e=e||window .event ; return e.pageY ||e.clientY +document .body .scrollTop ; }
//获取鼠标光标相对于当前元素的位置。
1 2 3 4 5 6 function getElementX (e ){ return (e&&e.layerX )||window .event .offsetX ; } function getElementY (e ){ return (e&&e.layerY )||window .event .offsetY ; }
//获取页面的高度和宽度
1 2 3 4 5 6 7 8 function getPageHeight ( ){ var de=document .documentElement ; return document .body .scrollHeight ||(de&&de.scrollHeight ); } function getPageWidth ( ){ var de=document .documentElement ; return document .body .scrollWidth ||(de&&de.scrollWidth ); }
//获取滚动条的位置。
1 2 3 4 5 6 7 8 function scrollX ( ){ var de=document .documentElement ; return self.pageXOffset ||(de&&de.scrollLeft )||document .body .scrollLeft ; } function scrollY ( ){ var de=document .documentElement ; return self.pageYOffset ||(de&&de.scrollTop )||document .body .scrollTop ; }
//获取视口的高度和宽度。
1 2 3 4 5 6 7 8 function windowHeight ( ) { var de = document .documentElement ; return self.innerHeight ||(de && de.offsetHeight )||document .body .offsetHeight ; } function windowWidth ( ) { var de = document .documentElement ; return self.innerWidth ||( de && de.offsetWidth )||document .body .offsetWidth ; }