How do I get a CSS class to work in my Javascript file?

Question

I want to get this class to show up with the var newCaption. Below the Javascript I have linked the CSS Class.

window.onload = function() {

var caption = document.getElementsByTagName("caption");
var oldCaption = caption[0].innerHTML;
var newCaption = oldCaption + "CAPTION";

caption[0].removeChild(caption[0].firstChild);
caption[0].appendChild(document.createTextNode(newCaption));

Here's my CSS Class:

.hoverNode{
   background-color:#FFFFCC;
   border: solid 1px black;
   width:100px;
   height:100px;
   position:relative;
   float:top;
   font-size:10pt;
   margin:5px;
   padding:3px;
   color:black;
}

Show you html. You should have a class="hoverNode"

Michael Hobbs
– Michael Hobbs

2016-02-05 20:35:04 +00:00
Commented Feb 5, 2016 at 20:35 — Michael Hobbs
– Michael Hobbs, Commented Feb 5, 2016 at 20:35

Barmar · Accepted Answer · 2016-02-05 20:36:03Z

3

Add the class to the caption element.

caption.classList.add('hoverNode');

answered Feb 5, 2016 at 20:36

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

J. Nilles · Accepted Answer · 2016-02-05 20:54:20Z

0

In Firefox, the getElementByTagName() seems to be ignoring the caption. Perhaps because it is only permitted with a table as a parent. It's showing an error that caption[0] is undefined.

Try changing your caption to a p and it seems to work.

window.onload = function() {

var caption = document.getElementsByTagName("p");
var oldCaption = caption[0].innerHTML;
var newCaption = oldCaption + "CAPTION";

caption[0].removeChild(caption[0].firstChild);
caption[0].appendChild(document.createTextNode(newCaption));
}

Of course you'll need a <p> element to add the text to.

<caption>Some text</caption>
<p>Some Paragraph</p>

answered Feb 5, 2016 at 20:54

J. Nilles

875 bronze badges

1 Comment

J. Nilles Over a year ago

Or, if you surround your <caption> element with a <table> element it will also work.

Griz · Accepted Answer · 2016-02-05 21:38:19Z

0

This works!

var caption = document.getElementsByTagName("caption");
var oldCaption = caption[0].innerHTML;
var newCaption = "CAPTION";

var span = document.createElement('span');
var text = document.createTextNode(newCaption);
span.appendChild(text);
span.className = "hoverNode";
caption[0].appendChild(span);

answered Feb 5, 2016 at 21:38

Griz

651 silver badge8 bronze badges

Collectives™ on Stack Overflow

How do I get a CSS class to work in my Javascript file?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related