之前的博文: 测试了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. Hdfs读写数据出错

    1.Hdfs读数据出错:若在读数据的过程中,客户端和DataNode的通信出现错误,则会尝试连接下一个 包含次文件块的DataNode.同时记录失败的DataNode,此后不再被连接. 2.Hdfs在 ...

  2. (尚007)Vue强制绑定class和style

    注意:class和style的值是动态的值 1.test007.html <!DOCTYPE html><html lang="en"><head&g ...

  3. 洛谷P2324 [SCOI2005] 骑士精神

    题目 方法很多,最经典的是用搜索的算法,也就是\(IDA*\)算法搜索. \(IDA*\)算法是每次规定一个搜索深度,并在搜索的时候限制该搜索深度,从而达到把深搜的优点和广搜的优点结合起来优化时间的一 ...

  4. (27)打鸡儿教你Vue.js

    v-for 数组参数的顺序 当含有index时,以前传递的参数顺序是: (index, value).现在(value, index) ready替换使用新的mounted钩子代替,通过使用mount ...

  5. 【Python】安装MySQLdb模块centos 6.1 宝塔Linux面板 MySQL5.6

    [Python]安装MySQLdb模块centos 6.1 宝塔Linux面板 MySQL5.6 总之是各种坑 先说一下,宝塔安装在centos 6.1 i368 也就是32位系统上的方法 https ...

  6. P2502 [HAOI2006]旅行——暴力和并查集的完美结合

    P2502 [HAOI2006]旅行 一定要看清题目数据范围再决定用什么算法,我只看着是一个蓝题就想到了记录最短路径+最小生成树,但是我被绕进去了: 看到只有5000的边,我们完全可以枚举最小边和最大 ...

  7. loadRunner目录分析<二>

    loadRunner是用C语言进行编写的所以很多文件都是以.h文件结尾的 挑选一部分关键目录结构进行说明 1.analysis templates --分析模板,案例模板 2.bin --可执行程序, ...

  8. phpstorm 2019.1 修改浏览器

    如图,修改如下浏览器的位置,由于我安装了虚拟机,导致每次点击谷歌浏览器后,都是打开的虚拟机里面的谷歌浏览器,需要重新设置浏览器的位置 打开设置 打开浏览器设置界面 双击可以选择浏览器的路径,然后就可以 ...

  9. C++多重继承分析——《虚继承实现原理(虚继承和虚函数)》

    博客转载:https://blog.csdn.net/longlovefilm/article/details/80558879 一.虚继承和虚函数概念区分 虚继承和虚函数是完全无相关的两个概念. 虚 ...

  10. Jmeter聚合报告理解

     Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 Samples:表示这次测试中一共发出了多少个请求 ...