获得网页值以及设置div效果

先看基础

 

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页面

<input type="text">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>

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

添加事件，完成效果

<script type="text/javascript">
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";
}
</script>
<style>
#divShow
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
</style>
<input type="text" onfocus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>

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

点击后的最终效果：）