之前的博文： 测试了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>

图示：

JS根据offsetHeight修改元素的高度的更多相关文章

  1. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  2. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  3. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  4. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  5. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  6. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  7. 「jQuery」获取元素的高度

    在jQuery中,获取元素高度的方法有3个:height().innerHeight().outerHeight(); 顺带记一下元素的盒模型: height(高度), padding(内边距), m ...

  8. JavaScript 读取修改元素 及 伸拉门案例

    JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...

  9. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

随机推荐

  1. Tensorflow 细节P-40

    1.绝大部分时候都会忽略graph的使用,如下代码所示,学会怎样tf.get_default_graph()是重要的,此外注意变量定义时的初始化必须加 initializer 2.此外,要知道 wri ...

  2. (转载) 从0开始搭建SQL Server AlwaysOn 第四篇（配置异地机房节点）

    这一篇是从0开始搭建SQL Server AlwaysOn 的第四篇,这一篇开始搭建异地机房节点 注意点1 注意异地节点最好至少有2个AG节点,否则在本地节点进行手动故障转移的时候会出现仲裁警告,提示 ...

  3. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  4. WinDbg的安装、配置和功能

    一.WinDbg简介 WinDbg是微软发布的一款免费而十分强大的调试工具.既然是微软自己发布的调试工具,那它对微软产品的调试当然是十分的强大.Windows 调试器 (WinDbg) 可用于调试内核 ...

  5. Adobe Acrobat DC

    DC: document cloud [云服务] 但是Adobe document cloud包括: Acrobat DC, Adobe sign, 以及Web和移动应用程序. 参考: https:/ ...

  6. Python之☞float浮点数精度问题

    Python的浮点数损失精度问题(转) 一个简单的面试题: >>>0.1+0.1+0.1 0.2 >>>0.1+0.1+0.1 0.3000000000000000 ...

  7. SpringCloud：Zipkin链路追踪，并将数据写入mysql

    1.zipkin server 1.1.新建Springboot项目,zinkin 1.2.添加依赖 <dependency> <groupId>io.zipkin.java& ...

  8. namenode 性能优化 RPC队列拆分

    一.Service RPC port NameNode默认使用8020端口侦听所有的RPC请求(HDP版本),包括客户端数据请求,DataNode心跳和block上报,ZKFC模块监控检查和切换控制. ...

  9. pymongo helper

    import pymongo import click # 数据库基本信息 db_configs = { 'type': 'mongo', 'host': '127.0.0.1', 'port': ' ...

  10. 2018-2019-2 网络对抗技术 20165322 Exp9 Web安全基础

    2018-2019-2 网络对抗技术 20165322 Exp9 Web安全基础 目录 实验内容与步骤 (一)Webgoat安装 (二)SQL注入攻击 1.命令注入(Command Injection ...