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

  • 相关阅读:
    [King.yue]EXT.Grid行双击事件
    [King.yue]关于代码调试时的缓存问题的一个解决办法
    [Buffalo]ASP.NET MVC路由映射
    [Tommas] 如何创建自动化功能测试的基本原则
    [Tommas] Web测试中,各类web控件测试点总结
    [Tommas] ERP系统测试用例设计1(转)
    [King.yue]VS2012 无法启动IIS Express Web服务器的解决方案
    原创 html动态表格
    原创 SqlParameter 事务 批量数据插入
    jquery readio checked
  • 原文地址:https://www.cnblogs.com/huaxie/p/11887835.html
Copyright © 2011-2022 走看看