實用的javascript程式碼片段

在Javascript項目開發過程中，往往一些短小精悍的功能函數總是能使一些疑難雜症迎刃而解，或者又能激發開發人員的編程靈感寫出更加強大的程式。所以在這裡，我將平時用到的或看到的一些優美的函數分門別類整理出來，也算是作為程式碼片段，方便日後尋找和學習。

將多個JavaScript函數綁定到onload事件處理函數上

function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
    window.onload = func;
  }else{
    window.onload = function(){
      oldonload();
      func();
    }
  }
}

擷取元素真實、最終的CSS樣式屬性值的函數

//擷取指定元素(elem)的樣式屬性(name)
function getStyle(elem , name){
  //如果屬性存在於style[]中，那麼它已經被設定了(並且是當前的)
  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){
    //它使用的是通用的'text-align'的樣式規則而非'textAlign'
    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;
}

確定元素相對於父級標籤位置的函數：

//擷取元素相對於父級標籤的水平位置
function parentX(elem){
 //如果offsetParent是元素的父級標籤，那麼提前退出
 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);
}

設定元素x和y位置的函數：

//設定元素水平位置的函數
function setX(elem,pos){
 elem.style.left = pos + "px";
}

//設定元素垂直位置的函數
function setY(elem,pos){
 elem.style.top = pos + "px";
}

調整元素相對於當前位置的距離：

//在元素水平位置上增加距離
function addX(elem ,pos){
 setX(posX(elem) + pos);
}
//在元素垂直位置上增加距離
function addY(elem ,pos){
 setY(posY(elem) + pos);
}

元素的尺寸

擷取元素當前的高度和寬度

Code
function getHeight(elem){
  return parseInt(getStyle(elem, 'height'));
}

function getWidth(elem){
  return parseInt(getStyle(elem,'width'));
}

即使元素隱藏，亦能分別擷取它潛在的完整高度和寬度的兩個函數

Code
function fullHeight(elem){
  //如果元素是顯示的，那麼使用offsetHeight就能獲得高度，如果沒有offsetHeight,則使用getHeight()
  if(getStyle(elem,'display') != 'none')
    return elem.offsetHeight || getHeight(elem);
  //否則必須處理display為None的元素,所以重設它的css屬性以獲得更精確的讀數
  var old = resetCSS(elem,{display:'',visibility:'hidden', position:'absolute'});
  //使用clientHeight找出元素的完整高度，如果還不生效，則使用getHeight函數
  var h = elem.clientHeight || getHeight(elem);
  //恢複CSS的原有屬性
  restoreCSS(elem,old);
  //返回元素的完整高度
  return h;
}

function fullWidth(elem){
  if(getStyle(elem,'display')!='none')
    return elem.offsetWidth || getWidth(elem);
  var old = resetCSS(elem, {display:'',visibility:'hidden',position:'absolute'});
  var w = elem.clientHeight || getWidth(elem);
  restoreCSS(elem, old);
  return w;
}
}

設定CSS一組屬性的函數，可以恢複到原有設定;恢複CSS原有屬性，防止resetCSS函數副作用的函數

Code
function resetCSS(elem, prop){
  var old = {};
  for(var i in prop){
    //記錄舊的屬性值
    old[i] = elem.style[i];
    //設定新的值
    elem.style[i] = prop[i];
  }
  //返回已經變化的值的集合，預留給restoreCSS函數使用
  return old;
}

function restoreCSS(elem,prop){
  //重設所有屬性，恢複它們的原有值
  for(var i in prop)
    elem.style[i] = prop[i];
}