How do you set a css class attribute with Javascript?

Question

The element i'm working with is a image i would like displayed during load time.

I am trying to set a css class attribute, i can set attributes on my image but its class attributes override's it.

So i need to set the class attribute. The class is .bgImage

This is how i set the attribute:

LoadingImg.setAttribute("display", "block");

This is what i have tried:

LoadingImg.className("display", "block");

And

LoadingImg.setAttribute(".bgImage display", "block");

CSS:

.bgImage {
  position: fixed;
  top: 0; left: 33%;
  right: 0; bottom: 0;
  z-index: 1;
  display: none;
  background-repeat:no-repeat;
}

Exstra info:

LoadingImg is the image object, i had to grab it through iFrame levels.

var HomeDoc = $('#ContentFrame').contents()[0];
var LoadingImg = HomeDoc.all.namedItem('LoadingImg');

check [here][1] http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element [1]: http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element — tushar.dahiwale, Feb 18 '14 at 10:46

score 8 · Accepted Answer · answered Feb 18 '14 at 10:42

8

Use the style property to set the style in javascript.

LoadingImg.style.display = "block";

answered Feb 18 '14 at 10:42

score 2 · Answer 2 · answered Feb 18 '14 at 10:46

2

If you want to use jQuery you can try:

$( "#LoadingImg" ).css( "display","block" );

answered Feb 18 '14 at 10:46

Java_User

score 2 · Answer 3 · answered Feb 18 '14 at 10:50

2

You may use jQuery LoadingImg.addClass( ".bgImage" ).css("display", "block"); or LoadingImg.attr("class", ".bgImage").css("display", "block");

answered Feb 18 '14 at 10:50

Artem Kyba

3 Answers3