在css属性中使用javascript变量_Javascript_Jquery_Html_Css

在css属性中使用javascript变量

javascript jquery html css

在css属性中使用javascript变量,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是条形码。随着奖励时间的减少，我想降低酒吧的高度。这是我的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);

这是条形码。随着奖励时间的减少，我想降低酒吧的高度。这是我的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>


var currentDate=新日期（）；
var d=新日期（）；
var tl=currentDate.setTime（currentDate.getTime（）+2*60*1000）；
var秒=（tl-d）/1000；
var高度=50；
函数secondPassed（）{
var分钟=数学轮（（秒-30）/60）；
var剩余秒数=秒数%60；
如果（剩余秒数<10）{
剩余秒数=“0”+剩余秒数；
}
document.getElementById（'countdown'）。innerHTML=minutes+“：”+remainingSeconds；
如果（秒==0）{
清除间隔（倒计时）；
document.getElementById（'bonus'）.innerHTML=“Buzz”；
} 
否则{
秒--；
高度--；
}
}
var countdownTimer=setInterval（'secondPassed（）'，1000）；
奖金剩余时间：
尺寸：
小的
正常的
大的
颜色：
蓝色
绿色
彩虹
产品：
没有一个
产品1
产品2
产品3


2008
25



25%
50%
75%
100%

在这段代码中有一个奖金倒计时。我还在javascript中定义了一个可变高度，它随着var秒数的减少而减少。现在我想在css中使用这个变量。这是我的css代码：

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


输入#f-product2:checked~.graph container>li:n子级（1）.bar内部{
高度：50%；底部：0；
}

此代码仅显示该条的高度定义为50%；但是我想通过javascript变量

height

逐渐降低这个高度。我尝试在stackoverflow上搜索与此相关的问题，但它只告诉您可以在javascript中定义css属性。我想用另一种方法，即在css中使用javascript变量。或者，如果有其他方法，请建议

此代码取自。这可能有助于更好地理解我的问题。我只想根据我的倒计时来更改站点中这些条之一的高度

您的代码有点凌乱，但我可以给出一个非常简单的示例，它可以满足您的需要（因此，不是基于您给出的代码）

设置intervaltimer并在每个间隔更新div元素的高度

演示：

HTML:

JS:

如果我理解正确，您希望在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;

你不能直接把js变量放到css中。如果要更改高度，请使用js。我通常会建议在body或top ID中添加一个类，但由于您需要多次这样做，因此该选项并不实用，这正是我想要的。该代码在JSFIDLE中可以完美地工作，但在我复制粘贴代码时就不行了。我想有一些加载错误。我尝试了$（document）.ready（function（）{}）；之后，javascript代码仍然没有运行

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

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

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