实用的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];
}