设置div的绝对布局
来源:互联网 发布:淘宝刻假公章退货了 编辑:程序博客网 时间:2024/05/21 07:55
//获取元素
function get(objDiv){
return document.getElementById(objDiv);
}
//显示
function show(objDiv){
var obj = get(objDiv);
obj.style.display = "";
}
//隐藏
function hide(objDiv){
var obj = get(objDiv);
obj.style.display = "none";
}
//字符串是否为空
function isEmpty(str){
if(str == undefined || str == null || str == ''){
return true;
}
return false;
}
//获取元素A的X坐标
function getLeft(e){var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
//获取元素A的Y坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
/***************************************
DESC:设置div区域的绝对布局方式
@PARAM divId:界面上的显示的DIV
@PARAM relateDivId:相对区域的divId,比如按钮div,点击该按钮,在该按钮的位置弹出divId的区域
@PARAM plusX,plusY:xy的增量,用来进行位置微调
@PARAM isMiddle:是否显示在屏幕中间,T是,F否
***************************************/
var objDiv = get(divId);
objDiv.style.zIndex = '9999';
objDiv.style.position = "absolute";
objDiv.style.display = "none";
var relateDiv = get(relateDivId);
var offsetTop = getTop(relateDiv);
var offsetLeft = getLeft(relateDiv);
var offsetWidth = relateDiv.offsetWidth;
var offsetHeight = relateDiv.offsetHeight;
var x = offsetLeft;
var y = offsetTop + offsetHeight;
if(isEmpty(plusX) == false){
x += plusX;
}
if(isEmpty(plusY) == false){
y += plusY;
}
//alert(x+":"+y);
if(isMiddle == 'T'){
objDiv.style.left = (window.document.body.clientWidth - objDiv.style.pixelWidth)/ 2;
objDiv.style.top = (window.document.body.clientHeight - objDiv.style.pixelHeight)/ 2;
}else{
objDiv.style.top = y;
objDiv.style.left = x;
}
relateDiv.style.cursor = 'hand';
relateDiv.onclick = function(){
window.document.getElementById(divId).style.display = '';
};
var closeHtml = "<div style='background:\"blue\";height:10px;width:100%' align='left'><span title='隐藏' style='float:right;font-size:14px;color:white;cursor:hand;' onclick='document.getElementById(\""+divId+"\").style.display=\"none\"'>×</span></div>";
objDiv.innerHTML = closeHtml + objDiv.innerHTML;
}
- 设置div的绝对布局
- DIV的相对布局和绝对布局
- 设置DIV的绝对位置
- 用Javascript设置DIV的绝对位置
- 设置div层在屏幕的绝对居中
- VS2008下设置绝对定位的布局方式
- VS2008中设置成绝对定位的布局方式!
- 图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)
- div布局设置
- 绝对定位的DIV绝对居中显示
- DIV CSS绝对定位布局案例 position布局实例
- 实例演示div+css的绝对定位和相对定位布局
- 实例演示div+css的绝对定位和相对定位布局
- 获取div的绝对位置
- div+css的绝对定位
- 绝对定位的div居中
- 控件默认布局为绝对定位设置
- swing 绝对布局的使用
- 记录戴尔服务器双网卡网卡驱动升级与linux不兼容
- 一次纠错经历-------spring认证管理
- 关于国产数据库发展之我见
- POJ1286:Necklace of Beads(POLYA定理应用)
- 大于一个数的最小回文数
- 设置div的绝对布局
- 网络编程学习小结
- 这是很粗鲁很伤感情的
- oracle的正则表达式
- MFC控件篇之对话框中的消息与数据
- Java String对象的经典问题(new String())
- Ios-多视图
- struts.xml配置json
- myeclipse 项目 红感叹号 黄色感叹号的jar文件