//获取元素的样式值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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坐标。

1
2
3
4
5
6
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坐标。

1
2
3
4
5
6
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坐标。

1
2
3
4
5
6
function posX(elem){ 
return parseInt(getStyle(elem,”left”));
}
function posY(elem){
return parseInt(getStyle(elem,”top”));
}

//设置元素位置。

1
2
3
4
5
6
function setX(elem,pos){ 
elem.style.left=pos+”px”;
}
function setY(elem,pos){
elem.style.top=pos+”px”;
}

//增加元素X和y坐标。

1
2
3
4
5
6
function addX(elem,pos){ 
set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
set(elem,(posY(elem)+pos));
}

//获取元素使用css控制大小的高度和宽度

1
2
3
4
5
6
function getHeight(elem){ 
return parseInt(getStyle(elem,”height”));
}
function getWidth(elem){
return parseInt(getStyle(elem,”width”));
}

//获取元素可能,完整的高度和宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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];
}
}

//显示和隐藏

1
2
3
4
5
6
7
8
9
10
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”;
}
}

//设置透明度

1
2
3
4
5
6
7
function setOpacity(elem,num){ 
if(elem.filters){
elem.style.filter=”alpha(opacity=”+num+”)”;
}else{
elem.style.opacity=num/100;
}
}

//滑动

1
2
3
4
5
6
7
8
9
10
11
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));
}
}
}

//渐变

1
2
3
4
5
6
7
8
9
10
11
12
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);
}
}
}

//获取鼠标光标相对于整个页面的位置。

1
2
3
4
5
6
7
8
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;
}

//获取鼠标光标相对于当前元素的位置。

1
2
3
4
5
6
function getElementX(e){ 
return (e&&e.layerX)||window.event.offsetX;
}
function getElementY(e){
return (e&&e.layerY)||window.event.offsetY;
}

//获取页面的高度和宽度

1
2
3
4
5
6
7
8
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);
}

//获取滚动条的位置。

1
2
3
4
5
6
7
8
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;
}

//获取视口的高度和宽度。

1
2
3
4
5
6
7
8
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;
}