zoukankan      html  css  js  c++  java
  • [lodop]css样式after、before添加content内容之前和之后

    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或其他方式实现)

  • 相关阅读:
    Java中String做为synchronized同步锁
    99%的人都理解错了GET与POST的区别
    为什么Java中只有值传递
    解决maven打包时,会编译特定文件导致文件不可用
    Java使用icepdf转高清图片
    iText输出中文
    Error:(1, 1) java: 非法字符: ‘ufeff’
    java根据模板生成pdf
    携程Apollo统一配置中心的搭建和使用
    1008
  • 原文地址:https://www.cnblogs.com/huaxie/p/11887835.html
Copyright © 2011-2022 走看看