Javascript: styling content added with document.write()

Question

I would like to style the text content added to my page when I call document.write().

As you can see, I have a simple function to declare number between two dates however I don't know how to apply custom CSS styles to the number of days that I write to the document (ie via the diff variable).

Any ideas, please?

Note: Changed the question a bit according to the comments.

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)
  document.write(dny)
}
Cas420();

Stop using document.write() and start using element.innerHTML so you can properly insert HTML nodes. Then you can just style those HTML nodes with CSS. Also, HTML will always be a string, so unless by styling you mean formatting the number, like adding trailing zeroes and such, the words you use don't make sense in the context of HTML. — Shilly, Dec 20 '18 at 08:33
Numbers and strings don't have a concept of "style" in JavaScript (nothing has really). If you mean CSS, CSS is applied to DOM elements. DOM elements contain text. — Felix Kling, Dec 20 '18 at 08:33
At first, you shouldn't use `document.write` at all. Secondly, everything `dw` writes to a document is a __string__. Thirdly, you can't style strings, only elements can get styled. Fourthly, there's no attempt to "_style document.write()_" in the code, please elaborate the question. — Teemu, Dec 20 '18 at 08:34
I have a feeling that you have some other program getting data from this page as some sort of scraper, which assumes that it'll read an integer. Now you also want to view the output yourself, but you know that if you change it to a proper DOM element, the other program will fail to read the number. Is that correct? — ChatterOne, Dec 20 '18 at 08:37

score 1 · Accepted Answer · answered Dec 20 '18 at 08:33

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>

Yes, you understand me correctly, thank you so much for your help, it works now! And sorry guys for wrong explenantion of my problem. Thanks everyone for a help and have a nice day — David Pokorný, Dec 20 '18 at 09:07

Javascript: styling content added with document.write()

1 Answers1

Linked