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

元素的尺寸

获取元素当前的高度和宽度

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

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

即使元素隐藏，亦能分别获取它潜在的完整高度和宽度的两个函数

 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函数副作用的函数

 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];
}