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 :"".

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.