将JavaScript变量传递给外部CSS文件

Question

I've been doing a bit of searching and I haven't really found a solution that works. I should also preface this by saying that I'm quite the noob when it comes to CSS.

So I'm using a site called Muxy.io to handle my notifications for my stream. It allows you to customize the notifications using a HTML file and a CSS file.

Currently it looks like this: Notification preview

What I would like to accomplish is to randomize the angle at which the notification shows up.

Here's my current HTML code:

<div id="notificationHolder">
  <div id="followNotification">
    <div id="line">
      <span id="name">{name}</span>
      <span id="tagline">Has Just Followed!</span>
    </div>
  </div>

  <div class="tts" style="display: none;">
    {tts_user_message}
  </div>
  <script>
    $( document ).ready(function() {
        var audio = [ArrayOfSoundURLs];
        var rand = Math.floor(Math.random() * audio.length);
        audio[rand].play();
    });
  </script>
</div>

Here's my current CSS code (I didn't write this):

#line {
  background: rgba(37, 48, 74, .8)
}
#name {
  color: rgb(255, 179, 61)
}
#tagline {
  color: rgb(240, 242, 245)
}


html, body {
  margin: 0;
  padding: 0;
  font-family: 'Forced Square', sans-serif;
  font-style: italic;
}  

#notificationHolder {
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  top: 0;
  left: 0;
}

#line {
  width: 0;
  height: 0;
  position: absolute;
  top: 400px;
  left: 50%;
  margin-left: 0;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  opacity: 0;
  -webkit-animation: lineIn 0.2s .6s forwards, 
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
          animation: lineIn 0.2s .6s forwards, 
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards; 
}

@-webkit-keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@-webkit-keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@-webkit-keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}

@keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}


#name {
  text-align: center;
  font-size: 120px;
  width: 2200px;
  display: block;
  line-height: 120px;
  text-indent: -3000px;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  opacity: 0;
  -webkit-animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
          animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;} 
}

@keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;} 
}

@-webkit-keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;} 
  100% {text-indent: 3000px;} 
}

@keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;} 
  100% {text-indent: 3000px;} 
}

#tagline {
  text-align: center;
  font-size: 50px;
  width: 2200px;
  display: block;
  line-height: 50px;
  text-indent: 3000px;
  position: absolute;
  bottom: 30px;
  white-space: nowrap;
  opacity: 0;
  -webkit-animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
          animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;} 
  100% {text-indent: 20px;opacity: 1;} 
}

@keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;} 
  100% {text-indent: 20px;opacity: 1;} 
}

@-webkit-keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;} 
  100% {text-indent: -3000px;} 
}

@keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;} 
  100% {text-indent: -3000px;} 
}

To change the angle of the notification I need to change "the rotate(-deg)" parts of this section of code. And as, from what I understand, you can't generate a random number in CSS I would need to do this in the HTML file and the pass it on to the CSS file.

#line {
      width: 0;
      height: 0;
      position: absolute;
      top: 400px;
      left: 50%;
      margin-left: 0;
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
      opacity: 0;
      -webkit-animation: lineIn 0.2s .6s forwards, 
                 lineGrow 0.4s 1s forwards,
                 linehide 0.5s 6.7s forwards;
              animation: lineIn 0.2s .6s forwards, 
                 lineGrow 0.4s 1s forwards,
                 linehide 0.5s 6.7s forwards; 
    }

So my question is, how could I go about this while sticking within the limitations of the Muxy.io site?

I apologize if this is way too specific (I thought it'd be better to give you all the information needed). Usually I do my best to figure these things out myself, but I hit a bit of a wall. I'm thankful for any light you can shine on the matter.

Answer 1

(Posted on behalf of the OP).

Solved, thanks for the help people :). Here's the lines of code added to the script section to get the desired effect:

var rand_angle = 5 - Math.floor(Math.random() * 10);
document.getElementById("line").style.transform = "rotate(" + rand_angle + "deg)";