Capturar propiedades CSS con JS

Calisco · #1 (**permalink**) 26/05/2008, 06:41

Hola. He estado leyendo por arriba como podemos hacer para capturar una propiedad CSS con JS.
A ver si voy rumbeando ...
Existe un array de propiedades denominado style de cada nodo HTML de nuestro sitio WEB, no es cierto ?.
De tal forma que si yo capturo el nodo en una variable ... por ejemplo:
var miNodo = document.getElementById('miDiv'); ...

Luego podría asignar una porpiedad CSS mediante la notación adecuada, que tengo entendido varía bastante entre los distintos browsers.
miNodo.style.color = 'red';

Sin embargo ... si quiero capturar el valor de una propiedad que fue seteada mediante CSS con JS ... no podría hacerlo tan sencillamente, porque el array style está inicialmente vacío, mas allá del CSS asociado, cierto ?

Hago agua porque al usar mootools yo puedo acceder a todas las propiedades CSS mediante el metodo getStyle (); por ejemplo ...
miNodo.getStyle ('color');

Si todo lo que he mencionado antes tiene sentido, la pregunta es como hace mootools para capturar todas estas propiedades ?. Pienso que usa document.stylesheet. Mi problema viene porque el método getStyle() funciona perfectamente menos con la propiedad background-position.

En fin ... alguien sabe realmente como funciona esto ?

Saludos.

Panino5001 · #2 (**permalink**) 26/05/2008, 07:26

Fijate si algo así te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<style>

#pp{width:252px; height:59px;background:url(images/lg_Clarin.gif) -5px -20px no-repeat;}

</style>

</head>

 
<body>

<div id="pp"></div>

<script>

try{

//ie || w3c compat

r= document.styleSheets[0].rules || document.styleSheets[0].cssRules;

for (i=0; r.length; i++)

    if (r[i].selectorText.toLowerCase() == '#pp'.toLowerCase()){

        bg=r[i].style['background'].split(' ');

        ret={left:bg[bg.length-2],top:bg[bg.length-1]};

        alert(ret.left);

        alert(ret.top);

    }

}catch(e){}

</script>

</body>

</html>

Calisco · #3 (**permalink**) 26/05/2008, 07:33

Gracias, el FW implementa algo similar a esto. Saludos.