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.
