How to style javascript output?

Question

So I have made a plugin for my website using javascript, one line of the code is output.innerHTML = "Test";

Can I style this using CSS or is there another way?

score 1 · Answer 1 · answered May 04 '14 at 12:53

1

Can I style this using CSS

Yes. Write a selector that matches the element you have a reference to in output.

Alternatively, add new elements inside it and write selectors that match them.

or is there another way?

Not anything sane.

answered May 04 '14 at 12:53

Quentin

800,325
104
1,079
1,205

And now I want to see all the *insane* ways you know how to style elements... :) – David says reinstate Monica May 04 '14 at 12:59
JSSS, presentational HTML and hiding them off-screen before rendering them on a canvas element spring to mind. – Quentin May 04 '14 at 13:00

score 0 · Answer 2 · answered May 04 '14 at 12:54

0

you can write directly like this

output.innerHTML = "<p style='your styles'>Test</p>";

answered May 04 '14 at 12:54

ɹɐqʞɐ zoɹǝɟ

4,174
3
18
35

score 0 · Answer 3 · answered May 04 '14 at 12:56

0

If you want to style the text which is appended to the output element, then either apply a CSS class or edit the style via javascript, for example by doing the following:

output.style.color = "#FF0000";

which would produce red text.

answered May 04 '14 at 12:56

chucktator

1,539
9
15

As would `'#f00'` and `'red'` (not criticism, just adding further information). – David says reinstate Monica May 04 '14 at 13:00

score -1 · Answer 4 · answered May 04 '14 at 13:16

-1

the html

<html>
    <body>
      <div id="output"></div>
    </body>
</html>

and javascript

window.onload = function(){
  var output = document.getElementById('output');
  console.log(output);
  output.innerHTML = "test";
  output.style.color ="#ff0000";
};

will do the work. CODEPEN

Be noted to always use window.onload or $(document).ready(function(){}) for the jQuery equivalence to make sure that the DOM element has exist by the time your javascript code is being executed.

answered May 04 '14 at 13:16

mcn

721
4
9

Thanks for that I have tried out a few methods mentioned here but have decided to style using #output in a separate css file. I wondered what windows.onload is about as have seen it a few times thanks for explaining what it does! – user3095871 May 04 '14 at 14:25
`window.onload` waits for the HTML element to be exist (and all images) in the page before the code executes. This prevents you from getting the `undefined` or `null` value from `document.getElementById('output')`. [READMORE](http://stackoverflow.com/questions/3698200/js-window-onload-vs-jquery-document-ready) – mcn May 04 '14 at 15:53

How to style javascript output?

4 Answers4