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>

이 코드에는 보너스 카운트 다운 타이머가 있습니다. 나는 또한 var 초가 감소함에 따라 감소하는 javascript의 가변 높이를 정의했다. 이제이 변수를 CSS에서 사용하고 싶습니다. 이것은 내 CSS 코드입니다 :

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

이 코드는 해당 막대의 높이가 50 %로 정의되어 있음을 보여줍니다. 하지만 자바 스크립트 변수 height에 의해이 높이를 점차 감소시키고 싶습니다. 이 질문에 대한 stackoverflow 관련된 질문에 대한 검색을 시도했지만 자바 스크립트에서 CSS 속성을 정의 할 수 있다고 알려줍니다. 다른 방법, 즉 CSS에서 javascript 변수를 사용하고 싶습니다. 다른 방법이 있다면 제안하십시오.

이 코드는 tympanus.net에서 가져옵니다. 이것은 내 질문을 더 잘 이해하는 데 도움이 될 수 있습니다. 난 그냥 내 카운트 다운 타이머에 따라 사이트에서 이러한 막대 중 하나의 높이를 변경하고 싶습니다.

출처

2014-03-13 Rushi

당신은 똑바로 CSS에서 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 변수 사용

답변

관련 문제