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

私は変更する必要がある通知の角度を変更するには」このコードセクションの「rotate（-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

（OPの代わりに掲示される）。

解決済み、ありがとうございました:)。

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