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

  • 相关阅读:
    NAS与SAN RAID
    使用slice和concat对数组的深拷贝和浅拷贝
    使用JSON.parse(),JSON.stringify()实现对对象的深拷贝
    ng2父子模块通信@ViewChild和@Inject
    js避免命名冲突
    JSON.parse()和JSON.stringify()
    object类型转换为Array类型
    Angular 2 ViewChild & ViewChildren
    ElementRef, @ViewChild & Renderer
    ng2父子模块数据交互
  • 原文地址:https://www.cnblogs.com/huaxie/p/11887835.html
Copyright © 2011-2022 走看看