常用的javascript函數

jopen 9年前發布 | 924 次閱讀 JavaScript

//獲取元素的樣式值。 
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;
}

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!