How do you set a css class attribute with Javascript? [duplicate]

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');

Answer 1

Use the style property to set the style in javascript.

LoadingImg.style.display = "block";

Answer 2

If you want to use jQuery you can try:

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

Answer 3

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