狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

Javascript實例教程:取得HTML元素的真正位置與大小

admin
2012年5月30日 0:24 本文熱度 3116

使用HTML元素的style.left,style.top,style.width,style.height以及width,height屬性,都不能獲得元素的真正位置與大小,這些屬性取出來的都是原來的設(shè)置值,例如width="500",那么通過document.getElementById(“table1″).width取出來的值永遠都是500,而不管這個表格是否已經(jīng)被撐大了;同時,通過document.getElementById(“table1″).style.left獲得的值是空的,因為沒有設(shè)置這個值。


要取得HTML元素的真正位置與大小,只能通過offsetLeft,offsetTop,clientWidth,clientHeight,offsetWidth,offsetHeight屬性,其中offsetLeft與offsetTop分別是當(dāng)前元素在父元素內(nèi)的相對左坐標(biāo)與相對頂坐標(biāo),要取得絕對坐標(biāo),還需要用到offsetParent屬性,改屬性取得當(dāng)前元素的父元素。要取得絕對坐標(biāo),就必須依次獲得父元素的相對坐標(biāo),直到父元素為空,然后把所有相對坐標(biāo)加起來,得到當(dāng)前元素的絕對坐標(biāo)。


最常見的是日期選擇框,當(dāng)點擊按鈕時彈出日期選擇框總是在按鈕的旁邊,這個選擇框的坐標(biāo),就是根據(jù)按鈕的坐標(biāo)以及按鈕的offsetWidth,offsetHeight來取得的。


—————————————————————————————————————————–
HTMLElement.offsetLeft
HTMLElement.offsetTop


但是需要注意的是,這兩個屬性所儲存的數(shù)值并不是該元素相對整個瀏覽器畫布的絕對位置,而是相對于其父元素位置的相對位置,也就是說這兩個數(shù)值得到的是以其元素左上角為(0,0)點從而計算出的數(shù)值。那么如何得到一個HTML元素的絕對位置呢,前一陣找到的一個比較好的函數(shù),分享一下:


//獲取元素的縱坐標(biāo)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標(biāo)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}


其原理就是利用HTMLElement.offsetParent屬性,如果當(dāng)前元素的父元素不是空(null),則在原本的offsetTop基礎(chǔ)上加上當(dāng)前的offsetTop,然后繼續(xù)獲取父元素的父元素的offsetTop,再將其加之,最終遞歸出該元素相對于整個瀏覽器畫布的縱坐標(biāo)。橫坐標(biāo)亦然。 


該文章在 2012/5/30 0:24:22 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved