Leer propiedad CSS

vrael · #1 (**permalink**) 19/02/2011, 18:10

Estoy intentando leer un atributo CSS con javascript, pero no sé que estoy haciendo mal, porque no lo consigo. Por alguna razón puedo modificar su valor, pero no leerlo de primeras.

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/199/xhtml">
<head>
    <style type="text/css">
        .ventana{
            height: 400px;
            width: 30%;
            margin:1%;
            position: absolute;
            border: 2px black double;
            cursor: move;
            z-index: 0;
        }
        #ventana_1{
            top: 123px; left: 225px;
            background-color: red;
        }
        #ventana_2{
            top: 5px; left: 25px;
            background-color: green;
        }
        #ventana_3{
            top: 200px; left: 45px;
            background-color: blue;
        }
        #ventana_4{
            top: 55px; left: 55px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        //Pinchas sobre un objeto y te devuelve su id
        function BuscarID(evt)
        {
            var ID = (evt.target)? evt.target.id : ((evet.srcElement)? evt.srcElement.id : null);
            //if(ID) alert('Clickeaste sobre: ' + ID);
            return ID;
        }
        //Buscar posición CSS
        function Posicion(evt)
        {
            var ID = BuscarID(evt);
            var Objeto = document.getElementById(ID);
            //alert(Objeto.style.top = '200px');
            var top = Objeto.style.top;
            alert(top);
            //alert('Posición: TOP = ' + Objeto.style.height + 'LEFT = ' + Objeto.sytle.width);
            return;
        }
    </script>
    
    <title>DIV</title>
</head>
<body>
    <div id="ventana_1" class="ventana" onclick = "Posicion(event)">VENTANA 1</div>
    <div id="ventana_2" class="ventana" onclick = "Posicion(event)">VENTANA 2</div>
    <div id="ventana_3" class="ventana" onclick = "Posicion(event)">VENTANA 3</div>
    <div id="ventana_4" class="ventana" onclick = "Posicion(event)">VENTANA 4</div>
</body>
</html>

zerokilled · #2 (**permalink**) 19/02/2011, 18:24

revisa el siguiente material, debe ayudarte http://www.telefonica.net/web2/blas-mar/leercss.html

_cronos2 · #3 (**permalink**) 19/02/2011, 18:25

Eso se debe a que el estilo está declarado en una hoja de estilos, o en este caso en una etiqueta style. Para hacer lo que quieres puedes usar una función que lea los estilos de las hojas de estilos y te lo diga si coincide, o usar una función que devuelva el estilo actual de un elemento.
Saludos (:
Edit: Por 1' !