99久久99久久精品,日本久久久久中文字幕,亚洲精品在线免费观看

JS根據offsetHeight修改元素的高度

admin

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

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

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

該div元素.style.height：指的是設置div的內容高度
offsetHeight獲取的：是指div內容高度+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">這里顯示內容</div>
</div>
<a href="javascript:prn_p1()">點擊設置內容</a><br>
<a href="javascript:prn_p2()">點擊進入打印設計</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 編輯過

關鍵字查詢

高度

修改

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

^{<menu id="0iu4g"></menu>}

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

JS根據offsetHeight修改元素的高度