js 设置html 宽高,js获得网页宽、高值以及设置div效果

//取网页卷上去的高度

h1=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop;

//取网页正文高，包含被卷上去的内容

h2=document.body.scrollHeight?document.body.scrollHeight:document.documentElement.scrollHeight;

//取网页中能看到高

h3=document.body.clientHeight 

window.screen.width是获取整个屏幕的高度信息，浏览器最大化的情况下是”1024”

window.screen.width是获取整个屏幕去除任务栏后的高度信息，浏览器最大化的情况下是”1004”  网页可见区域宽：document.body.clientWidth 网页可见区域高：

document.body.clientHeight 网页可见区域宽：

document.body.offsetWidth?(包括边线的宽) 网页可见区域高：

document.body.offsetHeight?(包括边线的宽) 网页正文全文宽：

document.body.scrollWidth 网页正文全文高：

document.body.scrollHeight 网页被卷去的高：

document.body.scrollTop 网页被卷去的左：

document.body.scrollLeft 网页正文部分上：

window.screenTop 网页正文部分左：

window.screenLeft 屏幕分辨率的高：

window.screen.height 屏幕分辨率的宽：

window.screen.width 屏幕可用工作区高度：

window.screen.availHeight 屏幕可用工作区宽度：

window.screen.availWidth下面看设置div

废话少说，先建立一个htm页面

显示的内容

display:none，表示此层隐藏

position:absolute，表示此层的为绝对位置，方便后期进行绝对定位

添加事件，完成效果

function showDiv(obj) {

// 保存元素

var el = obj;

// 获得元素的左偏移量

var left = obj.offsetLeft;

// 获得元素的顶端偏移量

var top = obj.offsetTop;

// 循环获得元素的父级控件，累加左和顶端偏移量

while (obj = obj.offsetParent) {

left += obj.offsetLeft;

top += obj.offsetTop;

}

// 设置层的坐标并显示

document.all.divShow.style.pixelLeft = left;

// 层的顶端距离为元素的顶端距离加上元素的高

document.all.divShow.style.pixelTop = top + el.offsetHeight;

document.all.divShow.style.display = "block";

}

#divShow

{

width:150px;

height:180px;

border-width:thin;

background:yellow;

}

显示的内容

注：offsetLeft和OffsetTop不是获得元素和页面的距离，只是获得元素和父元素的的距离 所以要进行while循环一层层累加距离，最后得到元素和页面之间的距离 层次关系：本元素->父元素->……>body->null，当为null时，退出while循环 点击后的最终效果：)?