Передать переменную JavaScript во внешний файл CSS

Question

Я занимаюсь поиском, и на самом деле я не нашел решение, которое работает. Я также должен предисловие к этому, сказав, что я совершенно нуб, когда речь заходит о CSS.

Итак, я использую сайт под названием Muxy.io для обработки моих уведомлений о моем потоке. Он позволяет настраивать уведомления с помощью файла HTML и файла CSS.

В настоящее время это выглядит следующим образом: Notification preview

То, что я хотел бы выполнить это рандомизации угол, при котором уведомление показывает вверх.

Вот мой текущий HTML код:

<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> 

Вот мой текущий код CSS (я не пишу):

#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;} 
} 

Чтобы изменить угол уведомления, что нужно изменить " вращать (-deg) "части этого раздела кода. И поскольку, насколько я понимаю, вы не можете создать случайное число в CSS, мне нужно будет сделать это в файле HTML и передать его в файл CSS.

#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; 
    } 

Так что мой вопрос, как я могу идти об этом, когда торчащих в пределах ограничений сайта Muxy.io?

Прошу прощения, если это слишком специфично (я думал, что лучше предоставить вам всю необходимую информацию). Обычно я делаю все возможное, чтобы разобраться в этом, но я ударил немного о стену. Я благодарен за любой свет, который вы можете рассказать по этому поводу.

Answer 1

(Отправлено от имени ОП).

Решенный, спасибо за помощь людям :). Ниже приведены строки кода, добавленные в секцию сценария, чтобы получить желаемый эффект:

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