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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php输出表格的实现代码(修正版)
2010/12/29 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
对教师的评语
2014/04/28 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
英文升职感谢信
2015/01/23 职场文书
业务员辞职信范文
2015/03/02 职场文书
目标责任书格式范文
2015/05/11 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
python基于tkinter实现gif录屏功能
2021/05/19 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技