CSS Not Being Applied to Document.Write Text

css not being applied to document.write text

Use innerHTML.

<div id="towrite"></div>

then you can write in it like this:

div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';

css doesn't work when using document.write()

If you call document.write() after page load is finished, you will write a new page (you "reset" your current page).

Try innerHTML instead, by "overwriting" the HTML inside of your path-file-wrapper div:

function uploadFile(fileInput) {
  var files = fileInput.files;
  var fileName = files[0].name.replace(/\.[^/.]+$/, "");
  var divToWrite = document.getElementsByClassName('file-path-wrapper')[0];
  divToWrite.innerHTML = "Volume: " + volume(fileName + '.stl') + "<br>Surface Area: " +surfaceArea(fileName + '.stl');
}

Css styles not getting applied in the page which I am trying to print using javascript

Consider the following example: https://jsfiddle.net/Twisty/aspehr0m/7/

JavaScript

$(function() {
  $("#btnPrint").click(function() {
    var contents = $("#content").html();
    var frame1 = $('<iframe>', {
        id: "frame1",
        name: "frame1"
      })
      .css({
        "position": "absolute",
        "top": "-1000000px"
      })
      .appendTo($("body"));
    var myHTML = $("<html>");
    $("<head>").appendTo(myHTML);
    $("<title>").html("DIV Contents").appendTo($("head", myHTML));
    $("<body>").appendTo(myHTML);
    $("body > link").clone().appendTo($("body", myHTML));
    $("body", myHTML).append(contents);
    console.log("Content", myHTML.prop("outerHTML"));
    var frameDoc = window.frames.frame1;
    frameDoc.document.open();
    //Create a new HTML document.
    frameDoc.document.write(myHTML.prop("outerHTML"));
    frameDoc.document.close();
    setTimeout(function() {
      frame1.focus();
      window.frames.frame1.print();
      frame1.remove();
    }, 500);
  });
});

Here you can use .clone() to make a copy of the existing Stylesheet Link. this will ensure it uses the same as the primary page.

It is consider a better practice not to mix JavaScript and jQuery, to stick to one or the other. In this case, it's a bit easier to to manage the iFrame element with native JavaScript.

Update

You might consider making a new Function: https://jsfiddle.net/Twisty/aspehr0m/38/

JavaScript

$(function() {
  $.fn.printContent = function() {
    var target = $(this);
    var title;
    if (target.attr("title") != undefined) {
      title = target.attr("title");
    } else {
      title = "Element Contents"
    }
    var uid = Date.now();
    var printFrame = $("<iframe>", {
      id: "printFrame_" + uid,
      name: "printFrame_" + uid
    }).css({
      position: "absolute",
      top: "-1000000px"
    }).appendTo($("body"));
    var frameHTML = $("<html>");
    $("<head>").appendTo(frameHTML);
    $("<title>").html(title).appendTo($("head", frameHTML));
    $("<body>").appendTo(frameHTML);
    if ($("body > link").length == 1) {
      $("body > link").clone().appendTo($("body", frameHTML));
    }
    $("body", frameHTML).append(target.html());
    var winFrame = window.frames['printFrame_' + uid];
    winFrame.document.open();
    winFrame.document.write(frameHTML.prop("outerHTML"));
    winFrame.document.close();
    setTimeout(function() {
      printFrame.focus();
      winFrame.print();
      printFrame.remove();
    }, 100);
  };

  $("#btnPrint").click(function() {
    $("#content").printContent();
  });
});

javascript document.write css doesn't apply

Finally I found the solution!!!
Print media type of bootstrap code blocked me and was also the bug to block all the other css i had in my page.
So I compliled a new bootstrap without the print media type and now is working!!!

How to add css styles to document.write in javascript

I'd suggest taking a slightly different approach. You can add a div to your HTML with an ID of "test" (or whatever you'd like), then edit the innerHTML of that div like so:

document.getElementById("test").innerHTML = name1;

document.write() for adding a stylesheet causes document to be blank

document.write() for adding a stylesheet causes document to be blank

Right. When you use document.write after the main page parsing is complete, it implicitly does a document.open, which wipes out the page.

Instead, use createElement and appendChild:

if ((Y.UA.chrome > 0) || (Y.UA.opera > 0)){
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.media = "print";
    link.type = "text/css";
    link.href = "../../../css/style_ticket_printing_header.css";
    document.querySelector("head").appendChild(link);
}

Or if you really like to use HTML: :-)

if ((Y.UA.chrome > 0) || (Y.UA.opera > 0)){
    document.querySelector("head").insertAdjacentHTML(
        "beforeend",
        "<link rel='stylesheet' media='print' type='text/css' href='../../../css/style_ticket_printing_header.css'/>"
    );
}

(Both of the above assume you have a head element, which you presumably do; it's required in a well-formed HTML document, either explicitly or because the browser adds it for you [but explicit is best].)

About querySelector: It finds the first element that matches a CSS selector. It's supported by all modern browsers, and also IE8. (There's also querySelectorAll, which finds a list of matching elements.)

Stylesheet ignored when using body onload and document.write

Your problem is with the document.write() called in a wrong moment^*. This method prints given text at current place in the page as was intended to work while the page still loads. Because you are calling it when the whole page was loaded, the results are unexpected (undefined?)

Instead you should manipulate the dom tree directly:

function writeLine() {
    var text = document.createTextNode("Hello World!");
    document.body.appendChild(text);
}

Actually in Opera browser I see red background for few milliseconds and then it goes back to white. Try commenting out document.write() - the background is as expected. Moreover you should include <script> tag at the end of body, but this won't solve your problem.

^{* to be honest, there is no good moment for calling document.write(), avoid it}

Unable to insert stylesheet/script into window.open

Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.

Here is the page to be printed:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
</head>
<body>
    <div id="print">
        <div class="red">TODO write content</div>
    </div>
    <button id="print_btn">Print</button>
    <script>
        $('#print_btn').click(function(){
            var newWindow = window.open('print.html','_blank');
            $(newWindow).load(function(){
               $(newWindow.document).find('body').html($('#print').html());
            });
        })
    </script>
</body>
</html>

The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html

Now, in print.html I'll write:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

How to apply CSS to document.write()?

That's wrong. See the correction:

var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^

You forgot a closing > here.

Working snippet below:

#jstext {  text-align: center;  font-size: 90px;}

<script>var number = 5; //just for an example//------------^ // Not sure but ; is a must in some places.document.write('<p id="jstext">' + number + '</p>')//----------------------------^</script>

Javascript: styling content added with document.write()

If I understand your question correctly, then you could apply styling to the text displaying the value of dny by wrapping that text in an element (ie a <span>) and then styling that element, like so:

<script>  function Cas420() {    var start = new Date("Febuary 1,2018 ");    end = new Date();    diff = 0;    days = 1000 * 60 * 60 * 24;
    diff = end - start;    var dny = Math.floor(diff / days)
    // Create span element to wrap "dny"    var span = document.createElement("span");        // Apply styles to span    span.style.color = 'red';    span.style.fontWeight = 'bold';        // Set text of span element to "dny"    span.innerText = dny;
    // Add span to document body    document.body.append(span);

  }</script>
<script>  Cas420();</script>

CSS Not Being Applied to Document.Write Text