&

JS根據(jù)offsetHeight修改元素的高度

admin

2023年9月28日 0:59 本文熱度 1416

之前的博文：測試了offsetHeight獲取的是頁面元素的高度，包裹該元素本身內(nèi)容的高度，上下padding，上下border。這個獲取的但是px，px是相對單位，受電腦分辨率的影響，用LODOP進行打印的時候，不建議使用px單位，建議使用pt、mm等絕對單位 。
JS修改某元素的css樣式，可查看本博客另一篇相關(guān)博文：。
首先設(shè)置一個div，該div設(shè)置初始的樣式,顏色，padding,margin和border。
然后在代碼里設(shè)置判斷下元素的高度
如果高度不超過190，則按照原來的樣式顯示
如果高度超過190，則修改div的高度，padding和border。

進入打印設(shè)計，可以看出用JS修改的樣式最后會變成行內(nèi)樣式，行內(nèi)樣式的優(yōu)先級比較高，行內(nèi)樣式可以用于修改style標簽中的樣式或外部樣式。

該div元素.style.height：指的是設(shè)置div的內(nèi)容高度
offsetHeight獲取的：是指div內(nèi)容高度+padding+border的高度。

測試代碼：

<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>
<textarea id="ta1" rows=10 cols=70></textarea>
<div id="prn">
<div id="D1">這里顯示內(nèi)容</div>
</div>
<a href="javascript:prn_p1()">點擊設(shè)置內(nèi)容</a><br>
<a href="javascript:prn_p2()">點擊進入打印設(shè)計</a><br>
<script language="javascript" type="text/javascript">   
  var LODOP; //聲明為全局變量 
  function prn_p1(){
      var T1=document.getElementById("D1");
      var T1_txt=document.getElementById("ta1").value;
      T1.innerHTML=T1_txt;
      console.log("D1的上下左右：top:"+D1.offsetTop+",left:"+D1.offsetLeft+",width:"+D1.offsetWidth+",height:"+D1.offsetHeight);
      if(D1.offsetHeight>190)
      {T1.style.height="190px";T1.style.padding="10px";T1.style.border="3px solid blue";T1.style.overflow="hidden";
      console.log("D1的上下左右：top:"+D1.offsetTop+",left:"+D1.offsetLeft+",width:"+D1.offsetWidth+",height:"+D1.offsetHeight);}
  };
function prn_p2(){//超文本不建議用px作為單位，建議用pt、mm等絕對單位，避免分辨率的影響
      console.log("D1的上下左右：top:"+D1.offsetTop+",left:"+D1.offsetLeft+",width:"+D1.offsetWidth+",height:"+D1.offsetHeight);
      LODOP=getLodop();
      LODOP.PRINT_INIT("");
      var style1="<style>#D1{background-color:#bbf1f2;padding:50px;margin:11px;border:10px solid blue;}</style>";
      LODOP.ADD_PRINT_HTM(0,0,"100%","100%",style1+document.getElementById("prn").innerHTML);
      LODOP.PRINT_DESIGN();
     //LODOP.PREVIEW();
};
</script> 
</body>

圖示：

該文章在 2023/9/28 0:59:27 編輯過

關(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),標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務(wù)都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。