Acessando o CSS com javascript - duas questes...

Acessar o CSS com javascript algo que fazemos com frequncia e que no envolve grandes mistrios, mas h
certas coisas que raramente precisamos fazer e acabamos esquecendo at que aquilo possvel. Desculpem,
estou escrevendo na 3 pessoa mas na verdade estou falando apenas por mim... Na verdade eu acredito que
deveramos aprender tudo o que est no nosso mbito e ao nosso alcance, mesmo achando que aquilo nunca
ser usado, mesmo porque quase sempre isso um erro causado por puro comodismo. Nesse texto vou
responder s minhas prprias dvidas, tentando exorcisar o comodismo, mas tambm por acreditar que outros
podem ganhar com as respostas que encontrei.
O CSS declarado inline, dentro da prpria TAG, est facilmente acessvel ao javascript, tanto para ler quanto
para modificar. Podemos tambm ler e modificar com facilidade o valor da propriedade className das TAGs,
alternando entre grupos de regras css pelos nomes das classes correspondentes. Mas, at pouco tempo atrs,
havia para mim dois pontos incgnitos, perguntas que no queriam calar: "como modificar regras dentro de
uma classe?" e "como obter as regras que incidem em determinado elemento por herana?". Bem, sou um
autodidata e essa curiosidade que me faz andar para frente, portanto, pesquisei e, como sempre, descobri
que simples. Alis, essa uma lio que posso dar aos iniciantes que so autodidatas como eu: difcil aquilo
que ainda no aprendemos a fazer, o resto fcil. No se deixe intimidar.
Como essas questes me incomodaram por bastante tempo, achei que valia escrever esse tutorial. Vamos l,
vou responder a elas da melhor maneira que conseguir.
Como modificar regras dentro de uma classe CSS?
Bem, naturalmente o javascript no pode modificar o que est escrito (hard-coded) no arquivo, mas entre a
leitura das classes CSS declaradas na pgina e a renderizao dos elementos a partir delas, o navegador faz
mais do que sonha a nossa v filosofia... e o fato que o documento rederizado com base em um objeto que
contm as regras CSS lidas e no no texto-base do documento exibido. E este objeto
(document.styleSheets) pode ser lido e modificado! Sua anatomia complexa e pr variar (mesmo nesses
tempos de padronizao), muda de um navegador para outro. Mais correto seria dizer "de um navegador para
os outros"... mas deixa pr l. Vamos tentar concentrar em reas acessveis aos dois (Mozilla e IE).
A primeira propriedade que precisamos entender o length, que est disponvel em todos os browsers e faz
referncia aos elementos de estilo existentes no ducumento. Estou falando das duas TAGs que so usadas para
esse fim: <STYLE> e <LINK>. No documento que voc est vendo h o seguinte CSS:
<!-- o arquivo test.css contm 3 regras definidas para as TAGs body, h1 e h2 -->
<link rel="stylesheet" type="text/css" href="test.css" />
<style type="text/css">
.codigo {
padding:8px;
width: 90%;
height:auto;
font-family:"Courier New", "Lucida Console";
font-size: 1.1em;
background-color: #FAFAFA;
height: auto;
border:3px dashed #CCC;
margin:20px 10px 20px 10px;
overflow:auto;
}
</style>
Bem, temos um elemento STYLE e um elemento LINK, portanto a propriedade
document.styleSheets.length ser igual a 2. A eventual presena de um @import url(...) dentro de
um elemento STYLE no iria interferir na propriedade length, mas numa outra propriedade, da qual no
trataremos aqui: imports.
Acessando o CSS com javascript - duas questes... http://www.caugb.com.br/scripts/cssjs/
1 de 3 13/11/2009 10:31
Os elementos do objeto so idnticos para regras adquiridas de arquivos CSS externos ou de elementos STYLE
declarados na prpria pgina e a forma de reconhec-los pela propriedade href, que no existe em TAGs
STYLE. A propriedade href do objeto document.styleSheets[_INDICE_], por outro lado, existir em todos
os elementos, mas para as TAGs STYLE o IE devolver uma string vazia e o Mozilla, a URL do arquivo atual
(...?).
Outra forma usar o atributo owningElement (IE) / ownerNode (Moz), que aponta para uma referncia ao
ndulo DOM relativo TAG em questo. Da basta usar o atributo tagName. Veja:
var isIE = (/\bmsie\b/i.test(navigator.userAgent) // Internet Explorer?
&& document.all && !(/\bopera\b/i.test(navigator.userAgent)));
// propriedades que mudam de nome do IE para o Mozilla...
var rulesName = isIE ? 'rules' : 'cssRules';
var domNode = isIE ? 'owningElement' : 'ownerNode';
var stl = document.styleSheets;
function showCSS() {
for(var i = 0; i < stl.length; i++) { // para cada elemento de estilo na pgina
alert('Elemento '+i+': '+stl[i][domNode].tagName+'\nRegras: '+stl[i][rulesName].lengt
for(var g = 0; g < stl[i][rulesName].length; g++) { // para cada regra desse elem
alert(stl[i][rulesName][g].selectorText+' {\n'+ // o seletor
// o cssText (os replaces apenas colocam quebras de linha e um
// ponto-e-vrgula no final, caso no exista)
stl[i][rulesName][g].style.cssText.replace(/;?\s*$/, ';').replace(/;\s*/g,
}
}
}
Clique aqui para testar o exemplo acima
Dessa forma, j pegamos os valores que queramos e j podemos modificar as classes e regras em geral pelo
atributo cssText (a declarao textual de todas as propriedades contidas em determinada regra). A sentena
abaixo...
var csst = "background-color:#FFC; color:#F60"; font:13px 'trebuchet
MS',verdana;";
document.styleSheets[0][rulesName][0].style.cssText = csst;
seria aceita e modificaria o tipo de fonte da regra BODY (testar | desfazer ). Mas podemos modificar cada
propriedade separadamente, como fazemos com o objeto style das tags. Veja:
// isso tambm funcionaria...
document.styleSheets[0][rulesName][0].style.backgroundColor = '#000';
document.styleSheets[0][rulesName][0].style.color = '#FFF';
document.styleSheets[1][rulesName][0].style.backgroundColor = '#666'; // cdigos
Clique aqui para testar o exemplo acima | desfazer
E com isso repondemos nossa primeira questo, certo?
Veja aqui um script mais completo para manipular os estilos na pgina.
Mas ainda restou a outra pergunta...
Como obter as regras CSS herdadas por determinado elemento?
A real dificuldade aqui que no basta ler os estilos inline e as classes CSS declarados na TAG, pois um
elemento pode, alm disso, herdar do seu elemento-pai ou de um ancestral qualquer, uma grande quantidade
de regras que, apesar de no estarem explicitamente declaradas na TAG, incidem sobre a renderizao visual
do elemento.
Acessando o CSS com javascript - duas questes... http://www.caugb.com.br/scripts/cssjs/
2 de 3 13/11/2009 10:31
Bem, essa resposta mais simples mas, mais uma vez, formas diferentes para navegadores diferentes... O IE
disponibiliza uma propriedade no ndulo DOM dos elementos, a currentStyle que engloba todos os estilos a
incidir sobre o elemento. J no Mozilla precisamos usar um mtodo do objeto document.defaultView, o
getComputedStyle(). Bem, para facilitar vamos construir uma funozinha crossbrowser, a
getCurrentStyle(). Veja:
function getCurrentStyle(elem) {
if(isIE) return elem.currentStyle;
else return (document.defaultView.getComputedStyle(elem, null) || false);
}
O elemento acima um PRE apenas com a classe codigo definida e o id "codetest". Na classe codigo no h
definio para a cor da fonte, mas ela exibida com a cor "#333" por herana da da regra definida para a TAG
BODY. Veja na prtica:
alert(getCurrentStyle(document.getElementById('codetest')).color);
Cilique aqui para testar.
O objeto de retorno da funo acima pode ser enorme, pois inclui todas as propriedades especficas de cada
navegador e, no caso do Mozilla, at funes. Por isso nosso exemplo foi direcionado a uma propriedade
escolhida (color) e recomendo que voc faa da mesma forma, para evitar dores de cabea. Seno, teste o
valor de cada item e ignore strings vazias e funes... isso vai melhorar um pouco a confuso.
Ateno!
Este tutorial leva em considerao apenas os navegadores da famlia Mozilla e o Internet Explorer.
Ok, espero que tenha sido de ajuda para algum.
Abrao a todos, Cau Guanabara

Acessando o CSS com javascript - duas questes... http://www.caugb.com.br/scripts/cssjs/
3 de 3 13/11/2009 10:31