Question

这是一个酒吧的代码。随着奖励时间的减少，我想降低酒吧的高度。这是该栏的HTML代码。

<!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。这可能有助于更好地理解我的问题。我只想根据倒数计时器更改站点中其中一个栏的高度。

Answer 1

你的代码有点乱，但我可以给出一个非常简单的例子来做你想要的（所以，不是基于你给出的代码）。

您可以设置间隔时间并更新每个间隔的div元素的高度。

DEMO：http://jsfiddle.net/Mp7R3/

HTML：

<div id="container">
    <div id="bar">
    </div>
</div>

CSS：

#container {
    width: 20px;
    height: 150px;
    position: relative;

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

JS：

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

Answer 2

如果我理解正确，您希望在CSS中使用内联JavaScript。不幸的是，这是不可能的。你必须使用JavaScript来设置这样的CSS：

jQuery的：

var myJavaScriptVariable = '30%';
$('input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner').css("height",myJavaScriptVariable);

直接JavaScript

var myJavaScriptVariable = '30%';
document.querySelector('input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner').style.height = myJavaScriptVariable;

在css属性中使用javascript变量

2 个答案: