js CSS操作方法集合
js CSS操作方法集合
发布时间:2016-12-30 来源:查字典编辑
摘要://获取元素的真实的,最终的CSS样式属性值的函数functiongetStyle(elem,name){if(elem.style[nam...

//获取元素的真实的,最终的CSS样式属性值的函数

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;

}

//确定元素相对于父亲的位置的两个函数

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容器的位置

function posX(elem){

return parseInt(getStyle(elem,"left"));

}

function posY(elem){

return parseInt(getStyle(elem,"top"));

}

//设置元素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);

}

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

function getHeight(elem){

return parseInt(getStyle(elem,'height'));

}

function getWidth(elem){

return parseInt(getStyle(elem,'width'));

}

//即是元素隐藏,也能分别获取它潜在的完整高度和宽度的两个函数

function fullHeight(elem){

if(getStyle(elem,'display')!='none'){

return elem.offsetHeight||getHeight(elem);

}

var old = resetCSS(elem,{

display:'',

visibility:'hidden',

position:'absolute'

});

var h = elem.clientHeight||getHeight(elem);

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.clientWidth || getWidth(elem);

restoreCSS(elem,old);

return w;

}

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

}

}

//使用CSS的display属性来切换元素可见性的一组函数

function hide(elem){

var curDisplay = getStyle(elem,'display');

if(curDisplay != 'none'){

elem.$oldDisplay= curDisplay;

}

elem.style.display = 'none';

}

function show(elem){

elem.style.display = elem.$oldDisplay ||'';

}

//设置元素的透明度

function setOpacity(elem,level){

if(elem.filters){

elem.style.filters = 'alpha(opacity='+level+')';

}else{

elem.style.opacity = level/100;

}

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类