2

Em um progressbar, por exemplo, com este style:

#progress {
background: #000000;
border-radius: 13px;
height: 20px;
width: 400px;
padding: 3px;
}

#progress:after {
content: '';
display: block;
background: white;
width: 300;
height: 100%;
border-radius: 9px;
}

Eu preciso alterar o preenchimento da bar em função do tempo. No caso, eu preciso alterar o width do progress:after. Como posso fazer isso?

2 Respostas 2

5

Eu preciso alterar o preenchimento da bar em função do tempo. No caso, eu preciso alterar o width do progress:after. Como posso fazer isso?

Não é possível alterar diretamente o estilo de um pseudo-elemento, como é o caso do :after.

No entanto, é possível adicionar regras específicas diretamente nos estilos interpretados pelo browser.

Para tal podemos utilizar o método .addRule do objeto CSSStyleSheet.

No entanto, é valido ressaltar que esse método não é suportado em todos os browsers.

Para garantir o funcionamento do código, vamos criar uma função auxiliar responsável por verificar se o browser tem suporte ao método .addRule. Em caso negativo, vamos trabalhar com a reescrita direta da propriedade CSS que queremos alterar.

A função auxiliar criada para o exemplo foi:

function changeRule(selector, property, value) {

    var stylesheet = document.styleSheets[0];

    if (stylesheet.addRule) {
        stylesheet.addRule(selector, property + ': ' + value);
    } else {

        var rules = stylesheet.cssRules;

        for (var i = 0; i < rules.length; i++) {
            var rule = rules[i];
            if (rule.selectorText == selector) {
                rule.style[property] = value;
            }
        }

    }

}

Segue um exemplo do uso:

var INCREMENT_FACTOR = 25;

function changeRule(selector, property, value) {

  var stylesheet = document.styleSheets[0];

  if (stylesheet.addRule) {
    stylesheet.addRule(selector, property + ': ' + value);
  } else {

    var rules = stylesheet.cssRules;

    for (var i = 0; i < rules.length; i++) {

      var rule = rules[i];

      if (rule.selectorText == selector) {
        rule.style[property] = value;
      }

    }

  }

}

var progressInterval = setInterval(function() {

  var progress = document.getElementById('progress');

  var maximumWidth = parseInt(window.getComputedStyle(progress).getPropertyValue('width'));

  var currentWidth = parseInt(window.getComputedStyle(progress, '::after').getPropertyValue('width'));

  var newWidth = currentWidth + INCREMENT_FACTOR;

  changeRule('#progress::after', 'width', newWidth + 'px');

  if (newWidth == maximumWidth) {
    clearInterval(progressInterval);
    alert('success!');
  }

}, 500);
#progress {
  background: #000000;
  border-radius: 13px;
  height: 20px;
  width: 400px;
  padding: 3px;
}
#progress:after {
  content: '';
  display: block;
  background: white;
  width: 0;
  height: 100%;
  border-radius: 9px;
}
<div id="progress"></div>

Leia mais sobre o assunto em Modify pseudo element styles with JavaScript.

2
  • @Sergio acredito que agora esteja ok. Na última alteração não funcionou porque o método .insertRule no FF acaba por substituir todo o estilo ao invés de adicionar.
    – Romulo
    13/10/2015 às 5:54
  • Boa! Já dei +1 acho que agora ficou ótimo. Se quiseres explicar esse feature detect stylesheet.addRule seria excelente :P
    – Sergio
    13/10/2015 às 5:54
5

No HTML5 existe a tag <progress> que serve justamente para isto. A diferença é que, ao invés de modificar a largura de um elemento, você vai precisar alterar somente o seu valor (atributo value).

var $progress = document.querySelector('progress'), // Pegando o elemento
    MAXIMUM   = $progress.max;                      // Pegando o valor máximo: 100

/* Aumentando o valor a cada 1 segundo para exemplificar... */
var interval = setInterval(function(){
  $progress.value++;
  if($progress.value >= MAXIMUM)
    clearInterval(interval);
}, 100);
<progress max='100' value='0'></progress>


Também é possível customizá-la como qualquer outro elemento HTML. A diferença é que, como as propriedades não são padronizadas, será preciso procurar pelas propriedades e prefixos para alterar a aparência:

.custom {
  background-color: #ecf0f1;
  border: 1px solid #ecf0f1;
  height: 10px
}

/* cor de background da barra */
.custom::-webkit-progress-bar {
  background-color: #fff
}

/* cor de background do valor de progresso */
.custom::-webkit-progress-value {
  background-color: #9b59b6
}

.custom::-moz-progress-bar {
  background-color: #9b59b6
}
<h4>Default:</h4>
<progress max='100' value='50'></progress>

<h4>Customizada:</h4>
<progress class='custom' max='100' value='75' data-value=''></progress>

0

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 .