Apply CSS style to text within Javascript?

Question

Is there a way to apply a CSS style within Javascript?

Say I have a CSS style titled "InfoFont" and I want to apply it to the text written from document.write("Information");, how would I do this?

document.write("<span class='InfoFont'>Information</span>");, with the normal caveat that document.write should be avoided. — Matt Greer
– Matt Greer, Commented Oct 9, 2012 at 19:50
I don't feel like expanding on the better alternatives to document.write though :) — Matt Greer
– Matt Greer, Commented Oct 9, 2012 at 19:51
@MattGreer: +1 for the best comment answer. Post this comment as answer. — Siva Charan
– Siva Charan, Commented Oct 9, 2012 at 19:59

Kevin Boucher · Accepted Answer · 2012-10-09 19:53:22Z

3

You would need to wrap the content you are adding dynamically with a tag containing the desired CSS class.

Are you really adding content via document.write though?

It would be more common to see something like this:

var newDiv = document.createElement( "div" );

newDiv.className = "InfoFont";
newDiv.innerHTML = "[YOUR CONTENT HERE]";

document.getElementById( "[RELEVANT CONTAINER ID]" ).appendChild( newDiv );

answered Oct 9, 2012 at 19:53

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I Hate Lazy Over a year ago

Don't use .setAttribute("class"). There are IE issues. Use newDiv.className = ... instead.

Maess · Accepted Answer · 2012-10-09 19:52:37Z

2

You need a document element like a span or a div to encapsulate your text. Then, you can apply a style to the encapsulating element.

As the comment mentioned, you should be avoiding document.write. I recommend you use jquery or another framework to manipulate the DOM if you have access to them.

answered Oct 9, 2012 at 19:52

Maess

4,16623 silver badges29 bronze badges

Comments

Siva Charan · Accepted Answer · 2012-10-09 19:55:19Z

1

Try this way:-

var ele = document.createElement('div');
ele.setAttribute('id', 'ELEMENTID');
ele.setAttribute('className', 'InfoFont'); // OR  ele.className = 'InfoFont';
ele.innerHTML = "CONTENT";

@Matt's comment answer is the simply best answer.

answered Oct 9, 2012 at 19:55

Siva Charan

18.1k10 gold badges64 silver badges95 bronze badges

1 Comment

Kevin Boucher Over a year ago

@Matt's comment answer is the simply best answer. If you leave out the undesirability of using document.write to add content.

Collectives™ on Stack Overflow

Apply CSS style to text within Javascript?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related