欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

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

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

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

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

測(cè)試代碼：

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