獲得網頁值以及設置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" οnfοcus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">顯示的內容</div>

注：offsetLeft和OffsetTop不是獲得元素和頁面的距離，只是獲得元素和父元素的的距離
所以要進行while循環一層層累加距離，最後得到元素和頁面之間的距離
層次關係：本元素->父元素->……>body->null，當爲null時，退出while循環

點擊後的最終效果：）