Capturando valores Css dos objetos.

Já tentaram recuperar algum valor do Css de objetos onde não foi atribuído o estilo pelo Js e nem foi atribuído em in-line?

Vou explicar melhor:

div#box{
	width:100px;
	height:100px;
	border:1px solid red; 
}

<div id="box"></div>

O que aconteceria se eu fizesse:

alert( 
	document.getElementById("box")
	.style.height 
)

????

O retorno seria vazio: “”.

Duas formas rápidas de se resolver isso seria usar Css in-line, setando diretamente na tag o valor do “height”, ou setar o valor inicialmente com javascript.

As duas formas são ruins, pra falar a verdade. Existe uma forma de pegar esses valores com javascript e pra variar temos dois js, um para navegadores e outro para o iE.

Para os navegadores:

document.defaultView
	.getComputedStyle(elemento, null)
	.getPropertyValue()

Para o iE:

Elemento.currentStyle

Bom, pelo menos o código do iE é bem mais elegante.

Eu já havia postado sobre isso e uma possível solução no fórum.
Mas não apareceu ninguém para fazer alguma crítica ( construtiva ) sobre meu algoritmo.

Que era esse:

function $style(elem, att){
	if(elem.currentStyle) 
		return (elem.currentStyle[att])
	return document.defaultView
			.getComputedStyle(elem, null)
				.getPropertyValue(att)
}

Porém ela pode ser melhorada, e percebi isso lendo um dos meus blogs favoritos que é o Milfont. O Milfont nesse post falou sobre o design pattern Bridge para encapsular o X-Browser.

O problema do meu algoritmo é que toda vez que a função $style fosse chamada, ela precisaria testar qual navegador eu estou usando. Nesse caso, o script tem 5 linhas e não há perda de desempenho significante, porém, vamos já nos acostumar a fazer da forma mais correta desde já.

Seguindo a lógica que Milfont descreveu, o algoritmo poderia ser melhorado para este formato:

var currentStyle = new function X(){
	if(document.all) 
		return( function(el, att){ 
			return el.currentStyle[att] 
		}) 

	return ( function(el, att){ 
		return document.defaultView
			.getComputedStyle(el, null)
			.getPropertyValue(att) 
	})
}

Pronto, agora ao chamar currentStyle os navegadores estariam usando o document.defaultView. Já os iE´s da vida usariam o element.currentStyle.

var box = document.getElementById("box")
alert( currentStyle( box, "height" ) )

É isso aí, abraços.

Anúncios

4 comentários sobre “Capturando valores Css dos objetos.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s