在CSS屬性中使用javascript變量

這是一個酒吧的代碼。隨着獎勵時間的減少，我想降低酒吧的高度。這是我的HTML代碼。在CSS屬性中使用javascript變量

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <script> 
    var currentDate = new Date(); 
    var d =new Date(); 

    var tl = currentDate.setTime(currentDate.getTime() + 2*60*1000); 
    var seconds =(tl - d)/1000; 
    var height = 50; 
    function secondPassed() { 

     var minutes = Math.round((seconds - 30)/60); 
     var remainingSeconds = seconds % 60; 
     if (remainingSeconds < 10) { 
     remainingSeconds = "0" + remainingSeconds; 
     } 
     document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
     if (seconds == 0) { 
     clearInterval(countdownTimer); 
     document.getElementById('bonus').innerHTML = "Buzz Buzz"; 
     } 
     else { 
     seconds--; 
     height--; 
     } 
    } 
    var countdownTimer = setInterval('secondPassed()', 1000); 
    </script> 
    </head> 
    <body> 
    <div id="bonus" class="hide"> 
    Time left for <b style="font-size:30px">BONUS</b>: 
    <span id="countdown" class="timer" style="color:red; font-weight:bold ;font-size:40px "></span> 
    </div> 

    <section class="main"> 
    <span class="button-label">Size:</span> 
    <input type="radio" name="resize-graph" id="graph-small" /><label for="graph-small">Small</label> 
    <input type="radio" name="resize-graph" id="graph-normal" checked="checked" /><label for="graph-normal">Normal</label> 
    <input type="radio" name="resize-graph" id="graph-large" /><label for="graph-large">Large</label> 

    <span class="button-label">Color:</span> 
    <input type="radio" name="paint-graph" id="graph-blue" checked="checked" /><label for="graph-blue">Blue</label> 
    <input type="radio" name="paint-graph" id="graph-green" /><label for="graph-green">Green</label> 
    <input type="radio" name="paint-graph" id="graph-rainbow" /><label for="graph-rainbow">Rainbow</label> 

    <span class="button-label">Product:</span> 
    <input type="radio" name="fill-graph" id="f-none" /><label for="f-none">None</label> 
    <input type="radio" name="fill-graph" id="f-product1" checked="checked" /><label for="f-product1">Product 1</label> 
    <input type="radio" name="fill-graph" id="f-product2" /><label for="f-product2">Product 2</label> 
    <input type="radio" name="fill-graph" id="f-product3" /><label for="f-product3">Product 3</label> 

    <ul class="graph-container"> 
     <li> 
     <span>2008</span> 
     <div class="bar-wrapper"> 
     <div class="bar-container"> 
      <div class="bar-background"></div> 
      <div class="bar-inner">25</div> 
      <div class="bar-foreground"></div> 
     </div> 
     </div> 
     </li> 

     <li> 
     <ul class="graph-marker-container"> 
     <li style="bottom:25%;"><span>25%</span></li> 
     <li style="bottom:50%;"><span>50%</span></li> 
     <li style="bottom:75%;"><span>75%</span></li> 
     <li style="bottom:100%;"><span>100%</span></li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
    </body> 
</html>

在此代碼中有一個獎勵倒數計時器。我還定義了一個JavaScript中的變量高度，隨着var秒數的減少而減少。現在我想在CSS中使用這個變量。這是我的CSS代碼：

<style> 
    input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner { 
    height: 50%; bottom: 0; 
    } 
</style>

此代碼僅示出了其杆的高度被定義爲50％;但我想通過javascript變量height逐漸降低此高度。我試圖在stackoverflow上搜索與此相關的問題，但它只告訴你可以在javascript中定義css屬性。我想要做另一種方式，即在CSS中使用javascript變量。或者如果有其他方法，請提出建議。

此編碼取自tympanus.net。這可能有助於更好地理解我的問題。我只想根據倒數計時器來改變網站中其中一個欄的高度。

來源

2014-03-13 Rushi

你不能把JS變量在CSS直線上升。如果你想改變高度，那麼用js來做。我通常會建議增加一個班級的身體或頂級身份證，但因爲你需要做很多次，這個選項是不實際的 – Huangism

#container { width: 20px; height: 150px; position: relative; } #bar { width: 100%; height: 100%; background-color: red; position: absolute; bottom: 0px; }

function Bar(element) { this.barEl = element; this.progress = 100; } Bar.prototype.setProgress = function (p) { if(p >= 0) { this.progress = p; this.barEl.style.height = this.progress + "%"; } } var barObj = new Bar(document.getElementById('bar')); setInterval(function() { barObj.setProgress(barObj.progress - 10); }, 1000);

在CSS屬性中使用javascript變量

回答

相關問題