Jquery作者John Resig自己封装的javascript 常用函数


Posted in Javascript onNovember 09, 2009
//获取元素的样式值。 
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; 
}
Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
JQuery 图片延迟加载并等比缩放插件
Nov 09 #Javascript
让Firefox支持event对象实现代码
Nov 07 #Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 #Javascript
JavaScript 变量基础知识
Nov 07 #Javascript
表格 隔行换色升级版
Nov 07 #Javascript
csdn 论坛技术区平均给分功能
Nov 07 #Javascript
在js中单选框和复选框获取值的方式
Nov 06 #Javascript
You might like
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP 简单日历实现代码
2009/10/28 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python中的作用域规则详解
2015/01/30 Python
python中Genarator函数用法分析
2015/04/08 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
如何基于Python实现数字类型转换
2020/02/07 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
师范生自荐信
2013/10/27 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python