JS根據offsetHeight修改元素的高度
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
之前的博文： 測試了offsetHeight獲取的是頁面元素的高度，包裹該元素本身內容的高度，上下padding，上下border。這個獲取的但是px，px是相對單位，受電腦分辨率的影響，用LODOP進行打印的時候，不建議使用px單位，建議使用pt、mm等絕對單位 。 進入打印設計，可以看出用JS修改的樣式最后會變成行內樣式，行內樣式的優(yōu)先級比較高，行內樣式可以用于修改style標簽中的樣式或外部樣式。 該div元素.style.height：指的是設置div的內容高度 測試代碼： <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 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
