Javascript 使用外部css或插入样式标记来记录片段_Javascript_Css

Javascript 使用外部css或插入样式标记来记录片段

javascript css

Javascript 使用外部css或插入样式标记来记录片段,javascript,css,Javascript,Css,我有动态创建的文档片段，并将其发送到打印机进行打印 var docHtml = document.createDocumentFragment(); var container = document.createElement("div"); container.innerHTML = "<div>" + "Some content goes here" + "</div>

我有动态创建的文档片段，并将其发送到打印机进行打印

var docHtml = document.createDocumentFragment();

var container = document.createElement("div");
container.innerHTML = "<div>" +
                            "Some content goes here" +
                      "</div>";

docHtml.appendChild(container);
var docsToPrint = MSApp.getHtmlPrintDocumentSource(docHtml);

我的文件碎片

2）是否可以在文档片段中使用外部css文件，或者在片段中插入带有所有css规则的“样式”标记？

只要您正在创建

div

内部的HTML页面链接到您的

css

文件，这应该不会是问题

试试这个：

container.innerHTML = "<div style='margin:0;'>" +
                            "Some content goes here" +
                      "</div>";

您需要动态创建

样式

元素并将其附加到主体中。css规则应该是此

样式元素的内部内容
$("<style type='text/css'> .blue{ background-color:blue;} </style>").appendTo("head");

$（“.blue{背景色：blue；}”）.appendTo（“head”）；
IMO，只需在css文件（外部文件）中创建所需的规则，并在html头部调用它。然后只需将类（根据您在css文件中创建的类）添加到您使用javascript代码生成的div中。它更干净，使用方便。正如@Koby Douek所说的那样：
 如果是这样，那么最好的选择就是添加css内联。比如：
container.innerHTML = "<div style='width:30px; height:30px; padding:0;'>" +
                        "Some content goes here" +
                  "</div>";

container.innerHTML=“”+
“这里有一些内容”+
"";
好的，尝试执行以下操作：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <!-- Inline Print CSS -->
        <style type="text/css" media="print">
            .test {
                background-color: red;
                width:50px;
                height:50px;
            }
        </style>
        <!-- Inline Print CSS -->

        <!-- OR -->

        <!-- External Print CSS -->
        <link rel="stylesheet" href="path/to/file/print.css" media="print" >
        <!-- / External Print CSS -->

    </head>

        <!-- Injected Content by your Js script -->
        <div class="test">

        </div>
        <!-- / Injected Content by your Js script -->

    <body>

    </body>
    </html>


文件
.测试{
背景色：红色；
宽度：50px；
高度：50px；
}
使用具有所有必需规则的外部css文件。然后在javascript代码中添加您在样式表中创建的类；实际上，这个片段就是我发送给打印机的整个页面。你写了.nomargin{margin:0}来放入我的css，你的意思是，我这里没有任何css文件，只是这个片段，或者我不理解这里的一些东西？如果你没有css文件，只需使用第一个建议：container.innerHTML=“…”你的第一个示例不起作用，我只是尝试了一下。我使用WinJS打印，需要添加@page{margin:0cm；}规则来解决这个问题。我的问题也是，我如何从上面的代码中创建外部css并附加到这个片段中，这可能吗？当您使用appendTo（'head'）；哪位负责人，因为我上面的片段是在他自己身上工作的，没有任何HTML页面作为容器，我将该片段发送到打印机，是否可以直接附加到片段，而不使用jquery，因为WinJS不允许使用jquery，实际上允许，但我没有使用它：）。我用一行var docsToPrint=MSApp.getHtmlPrintDocumentSource（docHtml）更新了上面的问题；这表明没有任何其他HTML页面可以添加我的片段。我刚刚把这样的片段发送到打印机上。是的，我试过了，但不起作用。我需要将@page{margin:0cm；}添加到我的页面/片段中。也许我创建片段的方法是错误的，因为我只有一个包含一些内容的div。可以用这种方式创建整个页面吗。当我说整个页面时，我想，主体、html、样式标签等等，然后在里面添加我的div？是的，这是最好的方法！！！！：：）然后你可以在html上校准css文件。然后你只需要对元素应用一个类，这是我最初的问题。如何处理文档片段？创建html，正文，在正文中添加我的div，并在页面{margin:0cm；}上添加样式。你能用例子更新你的问题吗？也许我对文档片段的理解是错误的。我认为有一些方法可以创建主体、html、样式等等。例如document.createElement（'html'）或document.createElement（'body'）。根据您的答案，这里的一个解决方案是将整个文档创建为字符串，并从该字符串创建文档。在我的情况下，这是不可能的，因为由于安全问题，通用windows平台不允许以这种方式创建任何内容。这里所有的答案都是正确的，但没有一个对我有用。似乎我的问题没有得到很好的解释：）
$("<style type='text/css'> .blue{ background-color:blue;} </style>").appendTo("head");

container.innerHTML = "<div style='width:30px; height:30px; padding:0;'>" +
                        "Some content goes here" +
                  "</div>";

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <!-- Inline Print CSS -->
        <style type="text/css" media="print">
            .test {
                background-color: red;
                width:50px;
                height:50px;
            }
        </style>
        <!-- Inline Print CSS -->

        <!-- OR -->

        <!-- External Print CSS -->
        <link rel="stylesheet" href="path/to/file/print.css" media="print" >
        <!-- / External Print CSS -->

    </head>

        <!-- Injected Content by your Js script -->
        <div class="test">

        </div>
        <!-- / Injected Content by your Js script -->

    <body>

    </body>
    </html>