5

Como imprimir uma variável javascript dentro de uma tag html?

<script>
  (function() {
     var PORCENTAGEM = '25%';
  })();       
</script>

<div class="progress progress-striped active">
  <div class="progress-bar" style="width: IMPRIMIR PORCENTAGEM AQUI"></div>
</div>

Alguma luz?

2 Respostas 2

6

Você pode selecionar o elemento pela nome da classe e setar o valor do atributo, exemplo:

Demo: JSFiddle

(function() {
    var porcentagem = '25%';
    document.getElementsByClassName('progress-bar')[0].setAttribute("style","width:"+porcentagem);
  })();


Edit:
Só para complementar, poderia ainda ser feito com jQuery de forma mais enxuta:

$(function(){
   var porcentagem = '25%';
   $('.progress-bar').width(porcentagem);
});

Demo2: JSFiddle

5

Para mudar o CSS de elementos diretamente via javascript pode fazer assim:

document.querySelector('.progress-bar').style.width = PORCENTAGEM;

Neste caso vai selecionar o primeiro elemento com classe "progress-bar" e mudar-lhe a largura para o valor que a variável PORCENTAGEM tiver no momento.

Não tenho a certeza como vai atualizar o valor da porcentagem.

Exemplo: http://jsfiddle.net/9LT7J/

Já agora podia fazer o que quer com o <progress> do HTML5, nesse caso faria assim:

<div class="progress progress-striped active">
    <progress max="100" class="progress-bar" value="0"></progress>
</div>

Exemplo: http://jsfiddle.net/9LT7J/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .