[lodop]css样式after、before添加content内容以前和以后

2021年09月15日 阅读数:2
这篇文章主要向大家介绍[lodop]css样式after、before添加content内容以前和以后,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

<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>

图示:css

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