css样式可以在内容之前和之后加内容。
格式是:
css类名:before{content:在之前加的内容}
css类名:after{content:在之后加的内容}
这种写法在LODOP里直接测试是不行的,所以建议用其他方法所代替,例如用JS,或字符串直接拼接。
content:attr(class);可以用类型,在JS中,可用:对象.className获取到类名。
测试代码:

<script language="javascript" src="LodopFuncs.js"></script>
<style id="style1">
.c1:after
{
content:attr(class);
}
.c1:before
{
content:"之前";
}
.c2{color:blue;}
</style>
</head>
<body>
<div id="div1">
<p class="c1" id="c1">这是p标签里的内容</p>
</div>
<div id="div2">
<p class="c2" id="c2">这是p标签里的内容</p>
</div>
<a href="javascript:prn1_preview()">content前后加内容</a><br>
<a href="javascript:prn2_preview()">innerHTML前后加内容</a><br>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
var strBodyStyle="<style>"+document.getElementById("style1").innerHTML+"</style>";
var strDivHtml=strBodyStyle+"<body>"+document.getElementById("div1").innerHTML+"</body>";
LODOP.ADD_PRINT_HTM(10,10,300,200,strDivHtml);
LODOP.PREVIEW();
};
function prn2_preview() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
var p=document.getElementById("c2");
console.log(p);
var strp=p.innerHTML;
console.log(strp);
var classP=p.className;
console.log(classP);
p.innerHTML="之前"+strp+classP;
LODOP.ADD_PRINT_HTM(10,10,300,200,document.getElementById("c2").innerHTML);
LODOP.PREVIEW();
};
</script>
</body>

图示:

用after、before和content给内容前后加上的,打印设计可以显示,预览出现问题。
用JS给前后内容加上的,预览正常。
(建议不用after,before和content给内容前后加内容,可以用JS或其他方式实现)

[lodop]css样式after、before添加content内容之前和之后的更多相关文章

  1. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  2. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  3. CSS样式逐li添加,执行完,清空,反复执行

    function change_light(el) { el.hide() let i = 0; function temp() { if (i > el.length - 1) { el.hi ...

  4. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  5. 实验四  CSS样式的应用

    实验四  CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...

  6. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

  7. html基础:css样式1

    h't'm'l中用到css样式有三种方式: 1.在header中增加style标签,在style标签中写 2.用link标签引用css样式文件 3.在需要使用css样式的标签添加style属性 一.在 ...

  8. CSS content内容生成技术以及应用

    content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...

  9. CSS content内容生成技术以及应用(转)

    一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...

随机推荐

  1. RocketMQ部分消息消费不到的问题

    在企业项目中,利用RocketMQ接收数据,存库. 由于是第一次在项目中具体的使用RocketMQ,一直采坑. 1.发现问题:在最终的联调过程中,并发压测,订单数据丢失,同一时刻,oms推送900+的 ...

  2. bzoj 2969: 矩形粉刷 概率期望+快速幂

    还是老套路:期望图上的格子数=$\sum$ 每个格子被涂上的期望=$\sum$1-格子不被图上的概率 这样的话就相对好算了. 那么,对于 $(i,j)$ 来说,讨论一下上,下,左,右即可. 然后发现四 ...

  3. 洛谷P1650赛马与codevs 2181 田忌赛马

    洛谷P1650 赛马 题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负 ...

  4. (3)Go运算符

    运算符 Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 算数运算符 运算符 描述 + 相加 - 相减 * 相乘 / 相除 % 求余 注意: ++(自增)和--(自 ...

  5. python 链表的实现

    code #!/usr/bin/python # -*- coding: utf- -*- class Node(object): def __init__(self,val,p=): self.da ...

  6. SVN版本回滚实战

    天在使用SVN发布的时候不小心修改了一些不正确的东西,新增和编辑了一些错误的文件,由于文件数量比较多,并且目录复杂,不可能单个进行处理,所以想到了SVN版本回滚. 回滚本地工作目录: 1.右键工作目录 ...

  7. ubuntu之路——day7.1 衡量模型好坏的因素偏差和方差bias&variance 以及在深度学习中的模型优化思路

    Error | 误差 Bias | 偏差 – 衡量准确性 Variance | 方差 – 衡量稳定性 首先我们通常在实际操作中会直接用错误率或者与之对应的准确率来衡量一个模型的好坏,但是更加准确的做法 ...

  8. NoSql数据库Redis系列(1)——Redis简介

    一.redis介绍 (一).Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点 ...

  9. polarssl rsa & aes 加密与解密<转>

    上周折腾加密与解密,用了openssl, crypto++, polarssl, cyassl, 说起真的让人很沮丧,只有openssl & polarssl两个库的RSA & AES ...

  10. 文献阅读 | Benchmarking single cell RNA-sequencing analysis pipelines using mixture control experiments

    资源: sci-hub paper CellBench package - github CellBench_data - code for the paper 现在单细胞领域的突出问题就是工具过多, ...