《Pro JavaScript Techniques》中的一些函数

//获取元素的样式值。
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坐标。    
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坐标。        
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坐标。
function posX(elem){
     return parseInt(getStyle(elem,"left"));
     }    
function posY(elem){
     return parseInt(getStyle(elem,"top"));
     }
//设置元素位置。    
function setX(elem,pos){
     elem.style.left=pos+"px";
     }    
function setY(elem,pos){
     elem.style.top=pos+"px";
     }
//增加元素X和y坐标。    
function addX(elem,pos){
     set(elem,(posX(elem)+pos));
     }
function addY(elem,pos){
     set(elem,(posY(elem)+pos));
     }
//获取元素使用css控制大小的高度和宽度    
function getHeight(elem){
     return parseInt(getStyle(elem,"height"));
     }
function getWidth(elem){
     return parseInt(getStyle(elem,"width"));
     }
//获取元素可能，完整的高度和宽度
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
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];
         }
     }
//显示和隐藏
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";
   }
     }
//设置透明度    
function setOpacity(elem,num){
     if(elem.filters){
         elem.style.filter="alpha(opacity="+num+")";
         }else{
             elem.style.opacity=num/100;
             }
     }
//滑动    
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));
                   }
         }
     }
//渐变
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);
                   }
         }
     }
//获取鼠标光标相对于整个页面的位置。    
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;
     }
//获取鼠标光标相对于当前元素的位置。
function getElementX(e){
     return (e&&e.layerX)||window.event.offsetX;
     }
function getElementY(e){
     return (e&&e.layerY)||window.event.offsetY;
     }
//获取页面的高度和宽度
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);
     }
//获取滚动条的位置。
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;
     }
//获取视口的高度和宽度。    
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;
}

今天在blueidea看到的。很不错的函数，不愧是jq的作者啊。其中那个获取style样式的函数看起来真眼熟啊，想起来几天前我才写的一个获取样式的函数。当时也考虑到用正则来让用户体验更好更傻瓜一点的，可是正则不太熟。还是大师厉害啊，学习ing。