打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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;
}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
DOM - 获取当前样式和IE兼容
JavaScript DOM 鼠标拖拽
Confused by document dimensions in JavaScript
100个直接可以拿来用的JavaScript实用功能代码片段
通过JS 获取Mouse Position(鼠标坐标)的代码
16年第一个笔记,总结最近工作中遇到的问题
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服