setInterval não funcionando da maneira correta

[Victor Ferreira 0]

function mudarTamanho(){
		var box = document.getElementById('box');
		var intervalo = setInterval(function(){
						box.offsetHeight +=5;
						}, 300);
		}

Eu quero somente que de 300 em 300 mls, a função ocorra novamente. Que aumente 5px a altura de uma div (a div é um quadrado azul, estou somente fazendo testes).

 

Em tempo, já utilizei .style.height no lugar de offsetHeight e nada funciona. Onde está o erro da função? todo intervalo TEM que ter um clear? será que é isso?

[William Bruno 1501]

Cara.. tem vários errinhos ai...

primeiro:

esqueceu de acessar o .style

 

segundo:

esqueceu que js só lê css inline

 

terceiro:

precisa fazer um 'parse' do height atual, para depois tentar incrementar

[Victor Ferreira 0]

offsetHeight não tem style.

 

quando você diz só ler css inline é não conseguir ler o box, que é block? pra isso usa-se o offsetHeight.

 

como assim parsear o height atual?

[William Bruno 1501]

Exemplo:

		<script type="text/javascript">
		function aumentar()
		{
			var box = document.getElementById('box');
			var height = parseInt( box.style.height );
			var width = parseInt( box.style.width );
			
			if( width < screen.width-50 )
			{
				box.style.height = height+20+'px';
				box.style.width = height+20+'px';
			}
			else
			{
				alert( 'Parou!' );
				clearInterval( intervalo );
			}
		}
		var intervalo = window.setInterval( aumentar, 100 );
		</script>
		<div id="box" style="height: 20px; width: 20px; background: #ccc;"></div>

experimente fazer:

alert( document.getElementById('box').style.height );

Você vai fazer, que irá te retornar algo como: 20px

não dá para somar um inteiro nessa string. Você antes precisa transformar esses 20px em 20, para conseguir fazer o incremento.

:lol:

 

 

CSS Inline, é aquele que está no atributo: style=""

'Javascript não lê' css da folha de estilos, e nem do <style>. (Salvo se usar algo como getComputedStyle e tal..)