Use a javascript variable in css attribute

Question

This is the code for a bar. I want to decrease the height of the bar as the bonus time decreases. This is my HTML code for the that bar.

<!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>

In this code there is a countdown timer for bonus. I have also defined a variable height in javascript which decreases as the var seconds decrease. Now I want to use this variable in css. This is my css code:

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

This code only shows that the height of that bar is defined as 50%; but I want to gradually decrease this height by the javascript variable height. I tried searching for questions related to this on stackoverflow but it only tells that you can define css property in javascript. I want to do the other way i.e. use javascript variable in css. Or if there is any other way, please suggest.

This code is take from tympanus.net. This might help in understanding my question better. I just want to change the height of one of these bars in the site according to my countdown timer.

You can't put js variables in css straight up. If you want to change the height, then do it with js. I would normally suggest adding a class to the body or a top ID but since you need to do this many times, that option is not practical — Huangism
– Huangism, Commented Mar 13, 2014 at 15:02

T.S. · Accepted Answer · 2014-03-13 15:04:20Z

1

Your code is a bit messy, but I can give a very simple example that does what you want (so, not based on the code you gave).

You set an intervaltimer and update the height of a div-element each interval.

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

answered Mar 13, 2014 at 15:04

T.S.

1,25213 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rushi Over a year ago

This is what I wanted . The code works perfectly in jsfiddle but not when I copy paste the code . I guess there is some loading error . I tried $(document).ready(function() { }); after <script> but still the javascript code is not running

Cody Brumfield · Accepted Answer · 2014-03-13 15:06:23Z

1

If I understand you correctly, you're hoping to use inline JavaScript within your CSS. That isn't possible, unfortunately. You'll have to use JavaScript to set the CSS like this:

jQuery:

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

Straight JavaScript

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

answered Mar 13, 2014 at 15:06

Cody Brumfield

4974 silver badges10 bronze badges

Collectives™ on Stack Overflow

Use a javascript variable in css attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related