js CSS操作方法集合

//获取元素的真实的，最终的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; } }

　　推荐阅读

　　JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)

var a='11160'; alert(parseInt(a,2)); //将111做为2进制来转换,忽略60(不符合二进制),从左至右只将符合二进制数的进行转换 alert(parseInt(a,16)); //将所有的都进行转换依照此方法,其实可以转换成任何进制 var >>>详细阅读

本文标题：js CSS操作方法集合

地址：http://www.17bianji.com/kaifa2/JS/29258.html

1/2 1