这是酒吧的代码。随着奖励时间的减少，我想降低栏的高度。这是那个栏的 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 .这可能有助于更好地理解我的问题。我只想根据我的倒计时更改网站中这些栏之一的高度。
最佳答案
你的代码有点乱，但我可以举一个非常简单的例子来做你想做的事(所以，不是基于你给的代码)。
您设置一个间隔计时器并在每个间隔更新 div 元素的高度。
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);
关于javascript - 在 css 属性中使用 javascript 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22382384/