Adding a light to javascript w/ ping test

Question

I want to display this light if a certain condition is true in javascript using an if statement. How can I add an external CSS class to a javascript if statement?

Here is my css code:

.beacon{
  position:absolute;

  background-color:#32CD32;
  height:1.5em;
  width:1.5em;
  border-radius:50%;
  -webkit-transform:translateX(-50%) translateY(-50%);
}
.beacon:before{
  position:absolute;
  content:"";
  height:1.5em;
  width:1.5em;
  left:0;
  top:0;
  background-color:transparent;
  border-radius:50%;
  box-shadow:0px 0px 2px 2px #32CD32;
  -webkit-animation:active 2s infinite linear;
  animation:active 2s infinite linear;
}

@-webkit-keyframes active{
  0%{
    -webkit-transform:scale(.1);
    opacity:1;
  }
  70%{
    -webkit-transform:scale(2.5);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

@keyframes active{
  0%{
    transform:scale(.1);
    opacity:1;
  }
  70%{
    transform:scale(2.5);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

this is the javascript code:

<div class="too white">
<script language="javascript"> 
url = "http://www.511virginia.org/"
ping = new XMLHttpRequest();   
ping.onreadystatechange = function(){
    if(ping.readyState == 4){ 
                if(ping.status == 200){
          document.write("Website is up");
        }
                else {
                  document.write("Website is down"); 
                                }
}
}
ping.open("GET", url, false);   
ping.send();
</script>
</div>

Possible duplicate of [How do you add CSS with Javascript?](https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript) — kabanus, Jun 29 '17 at 13:13
If my submission answered your question then please accept it. If not, what aspect was not answered? — disrvptor, Jul 13 '17 at 00:54

score 0 · Answer 1 · answered Jun 29 '17 at 13:16

It depends on any framework you're using. For example, if you're using jQuery then change a DOM element's CSS using .css(property, value). Angular has it's own methods. For raw DOM manipulation take a look at the w3c page on JavaScript HTML DOM - Changing CSS, which shows the following.

document.getElementById(id).style.property = new style

Adding a light to javascript w/ ping test

1 Answers1