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. Flatten List

    Description Given a list, each element in the list can be a list or integer. flatten it into a simpl ...

  2. CSS精灵图(王者荣耀案例)

    首先,我们应该知道引入精灵图的原因: 具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加 ...

  3. 利用Synplify Pro 加时钟约束的问题

    可以改名称为"design.ucf"加成新约束. 在使用Xilinx ISE进行综合时,可以与Synplify Pro软件配合,实现较高的综合性能.但是,有时会出现如下问题: “E ...

  4. Centos7变动

    Nmtui:网络配置图形界面 Systemctl:管理systemd的单元 Service:系统服务 Socket:进程间的通信 Busname: Target:多个unit构成的组,运行级别 Sna ...

  5. T-MAX组--项目冲刺（第六天）

    T-MAX组--项目冲刺(第六天) THE SIXTH DAY 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 T-MAX组--项 ...

  6. Thingsboard Gateway开发环境

    源码下载地址:https://github.com/thingsboard/thingsboard-gateway 国内大神源码地址:https://github.com/guodaxia103/th ...

  7. 乌龙茶生产过程中挥发性成分吲哚的形成 | Formation of Volatile Tea Constituent Indole During the Oolong Tea Manufacturing Process

    吲哚是啥?在茶叶成分中的地位?乌龙茶?香气,重要的前体,比如色氨酸Trp.IAA. Indole is a characteristic volatile constituent in oolong ...

  8. RecyclerView 实现快速滚动 (转)

    RecyclerView 实现快速滚动 极小光  简书作者   简评:Android Support Library 26 中终于实现了一个等待已久的功能:RecyclerView 的快速滚动. An ...

  9. Unexpected token o in JSON at position 1 报错原因

    写在前面的话这个问题在之前做项目时碰到过一次,当时按照网上的做法,去掉JSON.parse()这一层转换后就没有这个报错了,数据也能正常使用,就没多想,也没深究是什么原因. 可是这次又碰到了,所以这次 ...

  10. Javascript中的String.format方法实现

    <script type='text/javascript'> String.format = function() { var s = arguments[0]; for (var i ...