下JS中窗口和网页
几种尺寸属性含义 document.body.clientWidth(网页可见区域宽):是指浏览器显示网页
区域宽度
不包括浏览器边框宽度和垂直滚动条宽度
大小随着浏览器窗口大小而改变 document.body.clientHeight(网页可见区域高):是指浏览器显示网页
区域所能看到高度不包括浏览器边框宽度和水平滚动条高度大小随着浏览器窗口大小而改变 document.body.scrollTop(网页被卷去
高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着部分高 document.body.scrollLeft(网页被卷去
左):是指拉动水平滚动条时网页左面被左边线遮盖着部分宽 现在我们来分析
下
该如何实现: 第
步我们要实现是使层在弹出时绝对居中不去考虑是否有滚动条情况 1.计算出层距离显示区域左边和上边
位置 注意:divId指
是所要居中层,divId.clientWidth为其宽度！＠ var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到
值重新赋给DIVleft和top属性 divId.style.left＝v_left;
divId.style.top=v_top;
介绍说明:divId为DIV标签
id值 这样这个层就是居中显示
了 第 2步我们要实现
是使在拖动滚动条情况下弹出层也能居中 其实很简单我们只要把拖动
宽度和高度加到前面计算出来左边距和上边距中就OK 了 v_left
document.body.scrollLeft; v_top
document.body.scrollTop; 2.把得到
值重新赋给DIVleft和top属性 divId.style.left＝v_left;
divId.style.top=v_top;
这样显示出来就是居中
了 完整代码如下:
点击运行可以看到效果:
