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

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

JS獲當(dāng)前網(wǎng)頁元素高度offsetHeight
admin
2023年9月28日 1:1 本文熱度 565

本文測試的是offsetHeight，獲取網(wǎng)頁中某元素的高度，單位是像素，獲取的類型是整型，可以進(jìn)行數(shù)字運算。
如圖，網(wǎng)頁中的元素本身的高度包括，自身的內(nèi)容+padding+border,而margin是元素對外面的距離，所以不屬于元素本身的高度。

如圖，設(shè)置一個div，取名叫D1，D1的上下左右padding各50px，上下左右margin各11px;上下左右border各10px;
最后的結(jié)果是：
offsetTop:11px，也就是margin的top值。進(jìn)入瀏覽器的開發(fā)者模式，個人用的是qq瀏覽器極速模式，發(fā)現(xiàn)div在設(shè)置的頂邊距包括了body的margin。
offsetLeft：19px，該div的左邊margin設(shè)置的是11px，進(jìn)入瀏覽器的開發(fā)者模式，可以看到body也有margin,是8px，所以該div距離瀏覽器左邊的距離是body的margin+div自身的margin=8px+11px=19px。
offsetWidth：因為div本身不設(shè)寬度，所以是寬度自適應(yīng)，隨著瀏覽器窗口的大小而改變。內(nèi)容寬度1150px+上下padding50px+50px+上下border10px+10px=1270px。
offsetHeight:div本身的上下border+上下pddding+div里內(nèi)容本身的高度，由于本身沒給div設(shè)置高度樣式，所以高度和內(nèi)容有關(guān)，目前里面是一句話，內(nèi)容高度為42px。
10px+10px(上下border)+50px+50px(上下paddding)+42px（內(nèi)容本身高度）=162px。
在IE中也測試了下，不同的是height，因為不同瀏覽器的默認(rèn)字體默認(rèn)字體大小等不同等，導(dǎo)致內(nèi)容高度不同，因此offsetHeight也不同。

也就是offsetTop,offsetLeft是元素距離瀏覽器的邊距，和元素本身的margin和外面的其他的margin有關(guān)。
offsetWidth、offsetHeight是元素本身的border、padding、內(nèi)容的合計值，也就是整個元素本身的寬高。

測試代碼：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
<style>#D1{background-color:#bbf1f2;padding:50px;margin:11px;border:10px solid blue;}</style>
</head>
<body>
<div id="D1">官網(wǎng)樣例是混合部署<br>LodopFuncs.js里已經(jīng)寫好了判斷</div>
<a href="javascript:prn1_preview()">點擊獲取</a><br>
<script language="javascript" type="text/javascript">  
   var LODOP; //聲明為全局變量
   function prn1_preview(){
    var D1=document.getElementById("D1");
    console.log("D1的上下左右padding各50px，上下左右margin各11px;上下左右border各10px;");
    console.log("D1的上下左右：top:"+D1.offsetTop+",left:"+D1.offsetLeft+",width:"+D1.offsetWidth+",height:"+D1.offsetHeight);
   };
</script>
</body>

 圖示：


該文章在 2023/9/28 1:01:05 編輯過
關(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ù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(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