专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Javascript教程 » cssc.js:js CSS操作思路方法集合 »正文

cssc.js:js CSS操作思路方法集合

来源: 发布时间:星期四, 2008年12月25日 浏览:12次 评论:0
//获取元素真实最终CSS样式属性值
function getStyle(elem,name){
(elem.style[name]){
elem.style[name];
} (elem.currentStyle){
elem.currentStyle[name];
} (document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase;
var s = document.defaultView.getComputedStyle(elem,"");
s && s.getPropertyValue(name);
}{
null;
}
}
//两个确定元素相对于整个文档X和Y位置辅助位置
function pageX(elem){
elem.offParent?
elem.offLeft+pageX(elem.offParent):
elem.offLeft;
}
function pageY(elem){
elem.offParent?
elem.offTop+pageY(elem.offParent):
elem.offTop;
}
//确定元素相对于父亲位置两个
function parentX(elem){
elem.parentNode elem.offParent?
elem.offLeft:
pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
elem.parentNodeelem.offParent?
elem.offTop:
pageY(elem)-pageY(elem.parentNode);
}
//确定元素相对于它CSS容器位置
function posX(elem){
parseInt(getStyle(elem,"left"));
}
function posY(elem){
parseInt(getStyle(elem,"top"));
}
//设置元素x和y位置(和当前位置无关)
function X(elem,pos){
elem.style.left = pos+"px";
}
function Y(elem,pos){
elem.style.top = pos+"px";
}
//调整元素相对于当前位置距离
function addX(elem,pos){
X(posX(elem)+pos);
}
function addY(elem,pos){
Y(posY(elem)+pos);
}
//获取元素当前高度和宽度
function getHeight(elem){
parseInt(getStyle(elem,'height'));
}
function getWidth(elem){
parseInt(getStyle(elem,'width'));
}
//即是元素隐藏也能分别获取它潜在完整高度和宽度两个
function fullHeight(elem){
(getStyle(elem,'display')!='none'){
elem.offHeight||getHeight(elem);
}
var old = reCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var h = elem.clientHeight||getHeight(elem);
restoreCSS(elem,old);
h;
}
function fullWidth(elem){
(getStyle(elem,'display')!='none'){
elem.offWidth || getWidth(elem);
}
var old = reCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var w = elem.clientWidth || getWidth(elem);
restoreCSS(elem,old);
w;
}
function reCSS(elem,prop){
var old = ;
for(var i in prop){
old[i] = elem.style[i];
elem.style[i] = prop[i];
}
old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//使用CSSdisplay属性来切换元素可见性
function hide(elem){
var curDisplay = getStyle(elem,'display');
(curDisplay != 'none'){
elem.$oldDisplay= curDisplay;
}
elem.style.display = 'none';
}
function show(elem){
elem.style.display = elem.$oldDisplay ||'';
}
//设置元素透明度
function Opacity(elem,level){
(elem.filters){
elem.style.filters = 'alpha(opacity='+level+')';
}{
elem.style.opacity = level/100;
}
}

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: