Используйте переменную javascript в атрибуте css

0

Это код для бара. Я хочу уменьшить высоту бара при уменьшении бонуса. Это мой 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%; но я хочу постепенно уменьшить эту высоту с помощью height переменной javascript. Я попытался найти вопросы, связанные с этим в stackoverflow, но это только говорит о том, что вы можете определить свойство css в javascript. Я хочу сделать другой путь, т.е. Использовать переменную javascript в css. Или, если есть какой-либо другой способ, пожалуйста, предложите.

Этот код берет с tympanus.net. Это могло бы помочь лучше понять мой вопрос. Я просто хочу изменить высоту одного из этих баров на сайте в соответствии с моим таймером обратного отсчета.

  • 0
    Вы не можете поместить переменные js в css прямо вверх. Если вы хотите изменить высоту, сделайте это с помощью js. Обычно я бы предложил добавить класс к телу или верхний идентификатор, но так как вам нужно делать это много раз, этот вариант не практичен
Теги:

2 ответа

1

Ваш код немного грязный, но я могу привести очень простой пример, который делает то, что вы хотите (так, не на основе кода, который вы дали).

Вы устанавливаете интервал времени и обновляете высоту div-элемента каждый интервал.

ДЕМО: 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);
Поделиться
  • 0
    Это то, что я хотел. Код прекрасно работает в jsfiddle, но не при копировании и вставке кода. Я предполагаю, что есть некоторая ошибка загрузки. Я пробовал $ (document) .ready (function () {}); после <script>, но все равно код JavaScript не работает
1

Если я правильно вас понимаю, вы надеетесь использовать встроенный JavaScript в своем CSS. К сожалению, это невозможно. Вам нужно будет использовать 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;
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню