在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变量

回答

相关问题